import { AnimatePresence, AsyncMotionValueAnimation, DOMKeyframesResolver, DeprecatedLayoutGroupContext, DragControls, FlatTree, GroupAnimation, GroupAnimationWithThen, JSAnimation, KeyframeResolver, LayoutGroup, LazyMotion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionValue, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, PresenceContext, SubscriptionManager, SwitchLayoutGroupContext, ViewTransitionBuilder, VisualElement, WillChangeMotionValue, acceleratedValues, activeAnimations, addAttrValue, addPointerEvent, addPointerInfo, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, animate, animateMini, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, anticipate, applyPxDefaults, attachSpring, attrEffect, backIn, backInOut, backOut, buildTransform, calcGeneratorDuration, calcLength, cancelFrame, cancelMicrotask, cancelSync, circIn, circInOut, circOut, clamp, collectMotionValues, color, complex, convertOffsetToTimes, createBox, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cubicBezier, cubicBezierAsString, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, delay, dimensionValueTypes, disableInstantTransitions, distance, distance2D, domAnimation, domMax, domMin, easeIn, easeInOut, easeOut, easingDefinitionToFunction, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, flushKeyframeResolvers, frame, frameData, frameSteps, generateLinearEasing, getAnimatableNone, getAnimationMap, getComputedStyle as getComputedStyle2, getDefaultValueType, getEasingForSegment, getMixer, getValueAsType, getValueTransition, getVariableValue, hasWarned, hex, hover, hsla, hslaToRgba, inView, inertia, interpolate, invariant, invisibleValues, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDragActive, isDragging, isEasingArray, isGenerator, isHTMLElement, isMotionComponent, isMotionValue, isNodeOrChild, isNumericalString, isObject, isPrimaryPointer, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, keyframes, m, makeUseVisualState, mapEasingToNativeEasing, mapValue, maxGeneratorDuration, memo, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, motion, motionValue, moveItem, namespace_exports, noop, number, numberValueTypes, observeTimeline, optimizedAppearDataAttribute, parseCSSVariable, parseValueFromTransform, percent, pipe, positionalKeys, press, progress, progressPercentage, propEffect, px, readTransformValue, recordStats, removeItem, resize, resolveElements, resolveMotionValue, reverseEasing, rgbUnit, rgba, scale, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setStyle, spring, springValue, stagger, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, svgEffect, sync, testValueType, time, transform, transformPropOrder, transformProps, transformValue, transformValueTypes, unwrapMotionComponent, useAnimate, useAnimateMini, useAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePresence, usePresenceData, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, velocityPerSecond, vh, visualElementStore, vw, warnOnce, warning, wrap } from "./chunk-BLFSVU7M.mjs"; import { __commonJS, __decorateElement, __decoratorMetadata, __decoratorStart, __privateAdd, __privateGet, __privateMethod, __privateSet, __publicField, __runInitializers, __toESM } from "./chunk-YNHG2PI6.mjs"; // ../../../node_modules/hsluv/dist/hsluv.cjs var require_hsluv = __commonJS({ "../../../node_modules/hsluv/dist/hsluv.cjs"(exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Hsluv = void 0; var Hsluv2 = class _Hsluv { constructor() { this.hex = "#000000"; this.rgb_r = 0; this.rgb_g = 0; this.rgb_b = 0; this.xyz_x = 0; this.xyz_y = 0; this.xyz_z = 0; this.luv_l = 0; this.luv_u = 0; this.luv_v = 0; this.lch_l = 0; this.lch_c = 0; this.lch_h = 0; this.hsluv_h = 0; this.hsluv_s = 0; this.hsluv_l = 0; this.hpluv_h = 0; this.hpluv_p = 0; this.hpluv_l = 0; this.r0s = 0; this.r0i = 0; this.r1s = 0; this.r1i = 0; this.g0s = 0; this.g0i = 0; this.g1s = 0; this.g1i = 0; this.b0s = 0; this.b0i = 0; this.b1s = 0; this.b1i = 0; } static fromLinear(c) { if (c <=3 1308e-7) { return 12.92 * c; } else { return 1.055 * Math.pow(c, 1 / 2.4) - 0.055; } } static toLinear(c) { if (c> 0.04045) { return Math.pow((c + 0.055) / 1.055, 2.4); } else { return c / 12.92; } } static yToL(Y) { if (Y <=_ Hsluv.epsilon) { return Y / _Hsluv.refY * _Hsluv.kappa; } else { return 116 * Math.pow(Y / _Hsluv.refY, 1 / 3) - 16; } } static lToY(L) { if (L <=8 ) { return _Hsluv.refY * L / _Hsluv.kappa; } else { return _Hsluv.refY * Math.pow((L + 16) / 116, 3); } } static rgbChannelToHex(chan) { const c=M ath.round(chan * 255); const digit2=c % 16; const digit1=( c - digit2) / 16 | 0; return _Hsluv.hexChars.charAt(digit1) + _Hsluv.hexChars.charAt(digit2); } static hexToRgbChannel(hex2, offset) { const digit1=_ Hsluv.hexChars.indexOf(hex2.charAt(offset)); const digit2=_ Hsluv.hexChars.indexOf(hex2.charAt(offset + 1)); const n=d igit1 * 16 + digit2; return n / 255; } static distanceFromOriginAngle(slope, intercept, angle) { const d=i ntercept / (Math.sin(angle) - slope * Math.cos(angle)); if (d < 0) { return Infinity; } else { return d; } } static distanceFromOrigin(slope, intercept) { return Math.abs(intercept) / Math.sqrt(Math.pow(slope, 2) + 1); } static min6(f1, f2, f3, f4, f5, f6) { return Math.min(f1, Math.min(f2, Math.min(f3, Math.min(f4, Math.min(f5, f6))))); } rgbToHex() { this.hex="#" ; this.hex +=_ Hsluv.rgbChannelToHex(this.rgb_r); this.hex +=_ Hsluv.rgbChannelToHex(this.rgb_g); this.hex +=_ Hsluv.rgbChannelToHex(this.rgb_b); } hexToRgb() { this.hex=t his.hex.toLowerCase(); this.rgb_r=_ Hsluv.hexToRgbChannel(this.hex, 1); this.rgb_g=_ Hsluv.hexToRgbChannel(this.hex, 3); this.rgb_b=_ Hsluv.hexToRgbChannel(this.hex, 5); } xyzToRgb() { this.rgb_r=_ Hsluv.fromLinear(_Hsluv.m_r0 * this.xyz_x + _Hsluv.m_r1 * this.xyz_y + _Hsluv.m_r2 * this.xyz_z); this.rgb_g=_ Hsluv.fromLinear(_Hsluv.m_g0 * this.xyz_x + _Hsluv.m_g1 * this.xyz_y + _Hsluv.m_g2 * this.xyz_z); this.rgb_b=_ Hsluv.fromLinear(_Hsluv.m_b0 * this.xyz_x + _Hsluv.m_b1 * this.xyz_y + _Hsluv.m_b2 * this.xyz_z); } rgbToXyz() { const lr=_ Hsluv.toLinear(this.rgb_r); const lg=_ Hsluv.toLinear(this.rgb_g); const lb=_ Hsluv.toLinear(this.rgb_b); this.xyz_x=0 .41239079926595 * lr + 0.35758433938387 * lg + 0.18048078840183 * lb; this.xyz_y=0 .21263900587151 * lr + 0.71516867876775 * lg + 0.072192315360733 * lb; this.xyz_z=0 .019330818715591 * lr + 0.11919477979462 * lg + 0.95053215224966 * lb; } xyzToLuv() { const divider=t his.xyz_x + 15 * this.xyz_y + 3 * this.xyz_z; let varU=4 * this.xyz_x; let varV=9 * this.xyz_y; if (divider !==0 ) { varU /=d ivider; varV /=d ivider; } else { varU=N aN; varV=N aN; } this.luv_l=_ Hsluv.yToL(this.xyz_y); if (this.luv_l===0 ) { this.luv_u=0 ; this.luv_v=0 ; } else { this.luv_u=1 3 * this.luv_l * (varU - _Hsluv.refU); this.luv_v=1 3 * this.luv_l * (varV - _Hsluv.refV); } } luvToXyz() { if (this.luv_l===0 ) { this.xyz_x=0 ; this.xyz_y=0 ; this.xyz_z=0 ; return; } const varU=t his.luv_u / (13 * this.luv_l) + _Hsluv.refU; const varV=t his.luv_v / (13 * this.luv_l) + _Hsluv.refV; this.xyz_y=_ Hsluv.lToY(this.luv_l); this.xyz_x=0 - 9 * this.xyz_y * varU / ((varU - 4) * varV - varU * varV); this.xyz_z=( 9 * this.xyz_y - 15 * varV * this.xyz_y - varV * this.xyz_x) / (3 * varV); } luvToLch() { this.lch_l=t his.luv_l; this.lch_c=M ath.sqrt(this.luv_u * this.luv_u + this.luv_v * this.luv_v); if (this.lch_c < 1e-8) { this.lch_h=0 ; } else { const hrad=M ath.atan2(this.luv_v, this.luv_u); this.lch_h=h rad * 180 / Math.PI; if (this.lch_h < 0) { this.lch_h=3 60 + this.lch_h; } } } lchToLuv() { const hrad=t his.lch_h / 180 * Math.PI; this.luv_l=t his.lch_l; this.luv_u=M ath.cos(hrad) * this.lch_c; this.luv_v=M ath.sin(hrad) * this.lch_c; } calculateBoundingLines(l) { const sub1=M ath.pow(l + 16, 3) / 1560896; const sub2=s ub1> _Hsluv.epsilon ? sub1 : l / _Hsluv.kappa; const s1r = sub2 * (284517 * _Hsluv.m_r0 - 94839 * _Hsluv.m_r2); const s2r = sub2 * (838422 * _Hsluv.m_r2 + 769860 * _Hsluv.m_r1 + 731718 * _Hsluv.m_r0); const s3r = sub2 * (632260 * _Hsluv.m_r2 - 126452 * _Hsluv.m_r1); const s1g = sub2 * (284517 * _Hsluv.m_g0 - 94839 * _Hsluv.m_g2); const s2g = sub2 * (838422 * _Hsluv.m_g2 + 769860 * _Hsluv.m_g1 + 731718 * _Hsluv.m_g0); const s3g = sub2 * (632260 * _Hsluv.m_g2 - 126452 * _Hsluv.m_g1); const s1b = sub2 * (284517 * _Hsluv.m_b0 - 94839 * _Hsluv.m_b2); const s2b = sub2 * (838422 * _Hsluv.m_b2 + 769860 * _Hsluv.m_b1 + 731718 * _Hsluv.m_b0); const s3b = sub2 * (632260 * _Hsluv.m_b2 - 126452 * _Hsluv.m_b1); this.r0s = s1r / s3r; this.r0i = s2r * l / s3r; this.r1s = s1r / (s3r + 126452); this.r1i = (s2r - 769860) * l / (s3r + 126452); this.g0s = s1g / s3g; this.g0i = s2g * l / s3g; this.g1s = s1g / (s3g + 126452); this.g1i = (s2g - 769860) * l / (s3g + 126452); this.b0s = s1b / s3b; this.b0i = s2b * l / s3b; this.b1s = s1b / (s3b + 126452); this.b1i = (s2b - 769860) * l / (s3b + 126452); } calcMaxChromaHpluv() { const r0 = _Hsluv.distanceFromOrigin(this.r0s, this.r0i); const r1 = _Hsluv.distanceFromOrigin(this.r1s, this.r1i); const g0 = _Hsluv.distanceFromOrigin(this.g0s, this.g0i); const g1 = _Hsluv.distanceFromOrigin(this.g1s, this.g1i); const b0 = _Hsluv.distanceFromOrigin(this.b0s, this.b0i); const b1 = _Hsluv.distanceFromOrigin(this.b1s, this.b1i); return _Hsluv.min6(r0, r1, g0, g1, b0, b1); } calcMaxChromaHsluv(h) { const hueRad = h / 360 * Math.PI * 2; const r0 = _Hsluv.distanceFromOriginAngle(this.r0s, this.r0i, hueRad); const r1 = _Hsluv.distanceFromOriginAngle(this.r1s, this.r1i, hueRad); const g0 = _Hsluv.distanceFromOriginAngle(this.g0s, this.g0i, hueRad); const g1 = _Hsluv.distanceFromOriginAngle(this.g1s, this.g1i, hueRad); const b0 = _Hsluv.distanceFromOriginAngle(this.b0s, this.b0i, hueRad); const b1 = _Hsluv.distanceFromOriginAngle(this.b1s, this.b1i, hueRad); return _Hsluv.min6(r0, r1, g0, g1, b0, b1); } hsluvToLch() { if (this.hsluv_l > 99.9999999) { this.lch_l = 100; this.lch_c = 0; } else if (this.hsluv_l < 1e-8) { this.lch_l=0 ; this.lch_c=0 ; } else { this.lch_l=t his.hsluv_l; this.calculateBoundingLines(this.hsluv_l); const max=t his.calcMaxChromaHsluv(this.hsluv_h); this.lch_c=m ax / 100 * this.hsluv_s; } this.lch_h=t his.hsluv_h; } lchToHsluv() { if (this.lch_l> 99.9999999) { this.hsluv_s = 0; this.hsluv_l = 100; } else if (this.lch_l < 1e-8) { this.hsluv_s=0 ; this.hsluv_l=0 ; } else { this.calculateBoundingLines(this.lch_l); const max=t his.calcMaxChromaHsluv(this.lch_h); this.hsluv_s=t his.lch_c / max * 100; this.hsluv_l=t his.lch_l; } this.hsluv_h=t his.lch_h; } hpluvToLch() { if (this.hpluv_l> 99.9999999) { this.lch_l = 100; this.lch_c = 0; } else if (this.hpluv_l < 1e-8) { this.lch_l=0 ; this.lch_c=0 ; } else { this.lch_l=t his.hpluv_l; this.calculateBoundingLines(this.hpluv_l); const max=t his.calcMaxChromaHpluv(); this.lch_c=m ax / 100 * this.hpluv_p; } this.lch_h=t his.hpluv_h; } lchToHpluv() { if (this.lch_l> 99.9999999) { this.hpluv_p = 0; this.hpluv_l = 100; } else if (this.lch_l < 1e-8) { this.hpluv_p=0 ; this.hpluv_l=0 ; } else { this.calculateBoundingLines(this.lch_l); const max=t his.calcMaxChromaHpluv(); this.hpluv_p=t his.lch_c / max * 100; this.hpluv_l=t his.lch_l; } this.hpluv_h=t his.lch_h; } hsluvToRgb() { this.hsluvToLch(); this.lchToLuv(); this.luvToXyz(); this.xyzToRgb(); } hpluvToRgb() { this.hpluvToLch(); this.lchToLuv(); this.luvToXyz(); this.xyzToRgb(); } hsluvToHex() { this.hsluvToRgb(); this.rgbToHex(); } hpluvToHex() { this.hpluvToRgb(); this.rgbToHex(); } rgbToHsluv() { this.rgbToXyz(); this.xyzToLuv(); this.luvToLch(); this.lchToHpluv(); this.lchToHsluv(); } rgbToHpluv() { this.rgbToXyz(); this.xyzToLuv(); this.luvToLch(); this.lchToHpluv(); this.lchToHpluv(); } hexToHsluv() { this.hexToRgb(); this.rgbToHsluv(); } hexToHpluv() { this.hexToRgb(); this.rgbToHpluv(); } }; exports.Hsluv=H sluv2; Hsluv2.hexChars="0123456789abcdef" ; Hsluv2.refY=1 ; Hsluv2.refU=0 .19783000664283; Hsluv2.refV=0 .46831999493879; Hsluv2.kappa=9 03.2962962; Hsluv2.epsilon=0 .0088564516; Hsluv2.m_r0=3 .240969941904521; Hsluv2.m_r1=- 1.537383177570093; Hsluv2.m_r2=- 0.498610760293; Hsluv2.m_g0=- 0.96924363628087; Hsluv2.m_g1=1 .87596750150772; Hsluv2.m_g2=0 .041555057407175; Hsluv2.m_b0=0 .055630079696993; Hsluv2.m_b1=- 0.20397695888897; Hsluv2.m_b2=1 .056971514242878; } }); // ../../../node_modules/eventemitter3/index.js var require_eventemitter3=_ _commonJS({ "../../../node_modules/eventemitter3/index.js" (exports, module) { "use strict" ; var has=O bject.prototype.hasOwnProperty; var prefix2="~" ; function Events() { } if (Object.create) { Events.prototype=/ * @__PURE__ */ Object.create(null); if (!new Events().__proto__) prefix2=f alse; } function EE(fn, context, once) { this.fn=f n; this.context=c ontext; this.once=o nce || false; } function addListener(emitter, event, fn, context, once) { if (typeof fn !=="function" ) { throw new TypeError( "The listener must be a function" ); } var listener=n ew EE(fn, context || emitter, once), evt=p refix2 ? prefix2 + event : event; if (!emitter._events[evt]) emitter._events[evt]=l istener, emitter._eventsCount++; else if (!emitter._events[evt].fn) emitter._events[evt].push(listener); else emitter._events[evt]=[ emitter._events[evt], listener]; return emitter; } function clearEvent(emitter, evt) { if (--emitter._eventsCount===0 ) emitter._events=n ew Events(); else delete emitter._events[evt]; } function EventEmitter2() { this._events=n ew Events(); this._eventsCount=0 ; } EventEmitter2.prototype.eventNames=f unction eventNames() { var names=[ ], events, name; if (this._eventsCount===0 ) return names; for (name in events=t his._events) { if (has.call(events, name)) names.push(prefix2 ? name.slice(1) : name); } if (Object.getOwnPropertySymbols) { return names.concat(Object.getOwnPropertySymbols(events)); } return names; }; EventEmitter2.prototype.listeners=f unction listeners(event) { var evt=p refix2 ? prefix2 + event : event, handlers=t his._events[evt]; if (!handlers) return []; if (handlers.fn) return [handlers.fn]; for (var i=0 , l=h andlers.length, ee=n ew Array(l); i < l; i++) { ee[i]=h andlers[i].fn; } return ee; }; EventEmitter2.prototype.listenerCount=f unction listenerCount(event) { var evt=p refix2 ? prefix2 + event : event, listeners=t his._events[evt]; if (!listeners) return 0; if (listeners.fn) return 1; return listeners.length; }; EventEmitter2.prototype.emit=f unction emit(event, a1, a2, a3, a4, a5) { var evt=p refix2 ? prefix2 + event : event; if (!this._events[evt]) return false; var listeners=t his._events[evt], len=a rguments.length, args, i; if (listeners.fn) { if (listeners.once) this.removeListener(event, listeners.fn, void 0, true); switch (len) { case 1: return listeners.fn.call(listeners.context), true; case 2: return listeners.fn.call(listeners.context, a1), true; case 3: return listeners.fn.call(listeners.context, a1, a2), true; case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true; case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true; case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true; } for (i=1 , args=n ew Array(len - 1); i < len; i++) { args[i - 1]=a rguments[i]; } listeners.fn.apply(listeners.context, args); } else { var length=l isteners.length, j; for (i=0 ; i < length; i++) { if (listeners[i].once) this.removeListener(event, listeners[i].fn, void 0, true); switch (len) { case 1: listeners[i].fn.call(listeners[i].context); break; case 2: listeners[i].fn.call(listeners[i].context, a1); break; case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break; case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break; default: if (!args) for (j=1 , args=n ew Array(len - 1); j < len; j++) { args[j - 1]=a rguments[j]; } listeners[i].fn.apply(listeners[i].context, args); } } } return true; }; EventEmitter2.prototype.on=f unction on(event, fn, context) { return addListener(this, event, fn, context, false); }; EventEmitter2.prototype.once=f unction once(event, fn, context) { return addListener(this, event, fn, context, true); }; EventEmitter2.prototype.removeListener=f unction removeListener(event, fn, context, once) { var evt=p refix2 ? prefix2 + event : event; if (!this._events[evt]) return this; if (!fn) { clearEvent(this, evt); return this; } var listeners=t his._events[evt]; if (listeners.fn) { if (listeners.fn===f n && (!once || listeners.once) && (!context || listeners.context===c ontext)) { clearEvent(this, evt); } } else { for (var i=0 , events=[ ], length=l isteners.length; i < length; i++) { if (listeners[i].fn !==f n || once && !listeners[i].once || context && listeners[i].context !==c ontext) { events.push(listeners[i]); } } if (events.length) this._events[evt]=e vents.length===1 ? events[0] : events; else clearEvent(this, evt); } return this; }; EventEmitter2.prototype.removeAllListeners=f unction removeAllListeners(event) { var evt; if (event) { evt=p refix2 ? prefix2 + event : event; if (this._events[evt]) clearEvent(this, evt); } else { this._events=n ew Events(); this._eventsCount=0 ; } return this; }; EventEmitter2.prototype.off=E ventEmitter2.prototype.removeListener; EventEmitter2.prototype.addListener=E ventEmitter2.prototype.on; EventEmitter2.prefixed=p refix2; EventEmitter2.EventEmitter=E ventEmitter2; if ( "undefined" !==t ypeof module) { module.exports=E ventEmitter2; } } }); // ../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js var require_react_is_production_min=_ _commonJS({ "../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js" (exports) { "use strict" ; var b="function"===t ypeof Symbol && Symbol.for; var c=b ? Symbol.for( "react.element" ) : 60103; var d=b ? Symbol.for( "react.portal" ) : 60106; var e=b ? Symbol.for( "react.fragment" ) : 60107; var f=b ? Symbol.for( "react.strict_mode" ) : 60108; var g=b ? Symbol.for( "react.profiler" ) : 60114; var h=b ? Symbol.for( "react.provider" ) : 60109; var k=b ? Symbol.for( "react.context" ) : 60110; var l=b ? Symbol.for( "react.async_mode" ) : 60111; var m2=b ? Symbol.for( "react.concurrent_mode" ) : 60111; var n=b ? Symbol.for( "react.forward_ref" ) : 60112; var p=b ? Symbol.for( "react.suspense" ) : 60113; var q=b ? Symbol.for( "react.suspense_list" ) : 60120; var r=b ? Symbol.for( "react.memo" ) : 60115; var t=b ? Symbol.for( "react.lazy" ) : 60116; var v=b ? Symbol.for( "react.block" ) : 60121; var w=b ? Symbol.for( "react.fundamental" ) : 60117; var x=b ? Symbol.for( "react.responder" ) : 60118; var y=b ? Symbol.for( "react.scope" ) : 60119; function z(a) { if ( "object"===t ypeof a && null !==a ) { var u=a .$$typeof; switch (u) { case c: switch (a=a .type, a) { case l: case m2: case e: case g: case f: case p: return a; default: switch (a=a && a.$$typeof, a) { case k: case n: case t: case r: case h: return a; default: return u; } } case d: return u; } } } function A(a) { return z(a)===m 2; } exports.AsyncMode=l ; exports.ConcurrentMode=m 2; exports.ContextConsumer=k ; exports.ContextProvider=h ; exports.Element=c ; exports.ForwardRef=n ; exports.Fragment=e ; exports.Lazy=t ; exports.Memo=r ; exports.Portal=d ; exports.Profiler=g ; exports.StrictMode=f ; exports.Suspense=p ; exports.isAsyncMode=f unction(a) { return A(a) || z(a)===l ; }; exports.isConcurrentMode=A ; exports.isContextConsumer=f unction(a) { return z(a)===k ; }; exports.isContextProvider=f unction(a) { return z(a)===h ; }; exports.isElement=f unction(a) { return "object"===t ypeof a && null !==a && a.$$typeof===c ; }; exports.isForwardRef=f unction(a) { return z(a)===n ; }; exports.isFragment=f unction(a) { return z(a)===e ; }; exports.isLazy=f unction(a) { return z(a)===t ; }; exports.isMemo=f unction(a) { return z(a)===r ; }; exports.isPortal=f unction(a) { return z(a)===d ; }; exports.isProfiler=f unction(a) { return z(a)===g ; }; exports.isStrictMode=f unction(a) { return z(a)===f ; }; exports.isSuspense=f unction(a) { return z(a)===p ; }; exports.isValidElementType=f unction(a) { return "string"===t ypeof a || "function"===t ypeof a || a===e || a===m 2 || a===g || a===f || a===p || a===q || "object"===t ypeof a && null !==a && (a.$$typeof===t || a.$$typeof===r || a.$$typeof===h || a.$$typeof===k || a.$$typeof===n || a.$$typeof===w || a.$$typeof===x || a.$$typeof===y || a.$$typeof===v ); }; exports.typeOf=z ; } }); // ../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js var require_react_is=_ _commonJS({ "../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js" (exports, module) { "use strict" ; if (true) { module.exports=r equire_react_is_production_min(); } else { module.exports=n ull; } } }); // ../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js var require_hoist_non_react_statics_cjs=_ _commonJS({ "../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js" (exports, module) { "use strict" ; var reactIs=r equire_react_is(); var REACT_STATICS={ childContextTypes: true, contextType: true, contextTypes: true, defaultProps: true, displayName: true, getDefaultProps: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, mixins: true, propTypes: true, type: true }; var KNOWN_STATICS={ name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true }; var FORWARD_REF_STATICS={ "$$typeof" : true, render: true, defaultProps: true, displayName: true, propTypes: true }; var MEMO_STATICS={ "$$typeof" : true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true }; var TYPE_STATICS={ }; TYPE_STATICS[reactIs.ForwardRef]=F ORWARD_REF_STATICS; TYPE_STATICS[reactIs.Memo]=M EMO_STATICS; function getStatics(component) { if (reactIs.isMemo(component)) { return MEMO_STATICS; } return TYPE_STATICS[component[ "$$typeof" ]] || REACT_STATICS; } var defineProperty=O bject.defineProperty; var getOwnPropertyNames=O bject.getOwnPropertyNames; var getOwnPropertySymbols=O bject.getOwnPropertySymbols; var getOwnPropertyDescriptor=O bject.getOwnPropertyDescriptor; var getPrototypeOf=O bject.getPrototypeOf; var objectPrototype=O bject.prototype; function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { if (typeof sourceComponent !=="string" ) { if (objectPrototype) { var inheritedComponent=g etPrototypeOf(sourceComponent); if (inheritedComponent && inheritedComponent !==o bjectPrototype) { hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); } } var keys3=g etOwnPropertyNames(sourceComponent); if (getOwnPropertySymbols) { keys3=k eys3.concat(getOwnPropertySymbols(sourceComponent)); } var targetStatics=g etStatics(targetComponent); var sourceStatics=g etStatics(sourceComponent); for (var i=0 ; i < keys3.length; ++i) { var key7=k eys3[i]; if (!KNOWN_STATICS[key7] && !(blacklist && blacklist[key7]) && !(sourceStatics && sourceStatics[key7]) && !(targetStatics && targetStatics[key7])) { var descriptor=g etOwnPropertyDescriptor(sourceComponent, key7); try { defineProperty(targetComponent, key7, descriptor); } catch (e) { } } } } return targetComponent; } module.exports=h oistNonReactStatics; } }); // ../../../node_modules/fontfaceobserver/fontfaceobserver.standalone.js var require_fontfaceobserver_standalone=_ _commonJS({ "../../../node_modules/fontfaceobserver/fontfaceobserver.standalone.js" (exports, module) { "use strict" ; (function() { function p(a, c) { document.addEventListener ? a.addEventListener( "scroll" , c, false) : a.attachEvent( "scroll" , c); } function u(a) { document.body ? a() : document.addEventListener ? document.addEventListener( "DOMContentLoaded" , function b() { document.removeEventListener( "DOMContentLoaded" , b); a(); }) : document.attachEvent( "onreadystatechange" , function g() { if ( "interactive"==d ocument.readyState || "complete"==d ocument.readyState) document.detachEvent( "onreadystatechange" , g), a(); }); } ; function w(a) { this.g=d ocument.createElement( "div" ); this.g.setAttribute( "aria-hidden" , "true" ); this.g.appendChild(document.createTextNode(a)); this.h=d ocument.createElement( "span" ); this.i=d ocument.createElement( "span" ); this.m=d ocument.createElement( "span" ); this.j=d ocument.createElement( "span" ); this.l=- 1; this.h.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;" ; this.i.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;" ; this.j.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;" ; this.m.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;" ; this.h.appendChild(this.m); this.i.appendChild(this.j); this.g.appendChild(this.h); this.g.appendChild(this.i); } function x(a, c) { a.g.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:" + c + ";" ; } function B(a) { var c=a .g.offsetWidth, b=c + 100; a.j.style.width=b + "px" ; a.i.scrollLeft=b ; a.h.scrollLeft=a .h.scrollWidth + 100; return a.l !==c ? (a.l=c , true) : false; } function C(a, c) { function b() { var e=g ; B(e) && null !==e .g.parentNode && c(e.l); } var g=a ; p(a.h, b); p(a.i, b); B(a); } ; function D(a, c, b) { c=c || {}; b=b || window; this.family=a ; this.style=c .style || "normal" ; this.weight=c .weight || "normal" ; this.stretch=c .stretch || "normal" ; this.context=b ; } var E=n ull, F=n ull, G=n ull, H=n ull; function I(a) { null===F && (M(a) && /Apple/.test(window.navigator.vendor) ? (a=/ AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), F=! !a && 603> parseInt(a[1], 10)) : F = false); return F; } function M(a) { null === H && (H = !!a.document.fonts); return H; } function N(a, c) { var b = a.style, g = a.weight; if (null === G) { var e = document.createElement("div"); try { e.style.font = "condensed 100px sans-serif"; } catch (q) { } G = "" !== e.style.font; } return [b, g, G ? a.stretch : "", "100px", c].join(" "); } D.prototype.load = function(a, c) { var b = this, g = a || "BESbswy", e = 0, q = c || 3e3, J = (/* @__PURE__ */ new Date()).getTime(); return new Promise(function(K, L) { if (M(b.context) && !I(b.context)) { var O = new Promise(function(r, t) { function h() { (/* @__PURE__ */ new Date()).getTime() - J >= q ? t(Error("" + q + "ms timeout exceeded")) : b.context.document.fonts.load(N(b, '"' + b.family + '"'), g).then(function(n) { 1 <=n .length ? r() : setTimeout(h, 25); }, t); } h(); }), P=n ew Promise(function(r, t) { e=s etTimeout(function() { t(Error( "" + q + "ms timeout exceeded" )); }, q); }); Promise.race([P, O]).then(function() { clearTimeout(e); K(b); }, L); } else u(function() { function r() { var d; if (d=- 1 !=k && -1 !=l || -1 !=k && -1 !=m 2 || -1 !=l && -1 !=m 2) (d=k !=l && k !=m 2 && l !=m 2) || (null===E && (d=/ AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), E=! !d && (536> parseInt(d[1], 10) || 536 === parseInt(d[1], 10) && 11 >= parseInt(d[2], 10))), d = E && (k == y && l == y && m2 == y || k == z && l == z && m2 == z || k == A && l == A && m2 == A)), d = !d; d && (null !== f.parentNode && f.parentNode.removeChild(f), clearTimeout(e), K(b)); } function t() { if ((/* @__PURE__ */ new Date()).getTime() - J >= q) null !== f.parentNode && f.parentNode.removeChild(f), L(Error("" + q + "ms timeout exceeded")); else { var d = b.context.document.hidden; if (true === d || void 0 === d) k = h.g.offsetWidth, l = n.g.offsetWidth, m2 = v.g.offsetWidth, r(); e = setTimeout(t, 50); } } var h = new w(g), n = new w(g), v = new w(g), k = -1, l = -1, m2 = -1, y = -1, z = -1, A = -1, f = document.createElement("div"); f.dir = "ltr"; x(h, N(b, "sans-serif")); x(n, N(b, "serif")); x(v, N(b, "monospace")); f.appendChild(h.g); f.appendChild(n.g); f.appendChild(v.g); b.context.document.body.appendChild(f); y = h.g.offsetWidth; z = n.g.offsetWidth; A = v.g.offsetWidth; t(); C(h, function(d) { k = d; r(); }); x(h, N(b, '"' + b.family + '",sans-serif')); C(n, function(d) { l = d; r(); }); x(n, N(b, '"' + b.family + '",serif')); C(v, function(d) { m2 = d; r(); }); x(v, N(b, '"' + b.family + '",monospace')); }); }); }; "object" === typeof module ? module.exports = D : (window.FontFaceObserver = D, window.FontFaceObserver.prototype.load = D.prototype.load); })(); } }); // ../../library/src/router/lazy.tsx import { lazy as ReactLazy, forwardRef, isValidElement, useEffect } from "react"; import { jsx } from "react/jsx-runtime"; var preloadKey = "preload"; function isLazyComponentType(componentType) { return typeof componentType === "object" && componentType !== null && !isValidElement(componentType) && preloadKey in componentType; } function lazy(factory) { const LazyComponent = ReactLazy(factory); let factoryPromise; let LoadedComponent; let hasRendered = false; const Component17 = forwardRef(function LazyWithPreload(props, ref) { useEffect(() => { hasRendered = true; }, []); const Comp = LoadedComponent ?? LazyComponent; return /* @__PURE__ */ jsx(Comp, { ref, ...props }); }); Component17.preload = () => { if (!factoryPromise) { factoryPromise = factory().then((module) => { LoadedComponent = module.default; return LoadedComponent; }); } return factoryPromise; }; Component17.getStatus = () => { return { hasLoaded: LoadedComponent !== void 0, hasRendered }; }; return Component17; } // ../../library/src/router/useRouteElementId.ts import React4 from "react"; // ../../library/src/router/useCurrentRoute.tsx import React3, { useContext, useMemo as useMemo2 } from "react"; // ../../library/src/utils/objectKeys.ts var objectKeys = Object.keys; // ../../library/src/render/utils/isEqual.ts function hasProp(o, prop) { return Object.prototype.hasOwnProperty.call(o, prop); } var equalsKey = "equals"; function withEquals(o) { if (o === null) return false; if (!(equalsKey in o)) return false; return typeof o.equals === "function"; } function valueEqual(a, b) { if (a === b) return true; return a !== a && b !== b; } function arrayShallowEqual(a, b) { const length = a.length; if (length !== b.length) return false; for (let i = length; i-- !== 0; ) { if (!valueEqual(a[i], b[i])) return false; } return true; } function arrayDeepEqual(a, b) { const length = a.length; if (length !== b.length) return false; for (let i = length; i-- !== 0; ) { if (!equal(a[i], b[i], true)) return false; } return true; } function mapShallowEqual(a, b) { if (a.size !== b.size) return false; for (const [key7, aValue] of a.entries()) { if (!valueEqual(aValue, b.get(key7))) return false; } return true; } function mapDeepEqual(a, b) { if (a.size !== b.size) return false; for (const [key7, aValue] of a.entries()) { if (!equal(aValue, b.get(key7), true)) return false; } return true; } function setEqual(a, b) { if (a.size !== b.size) return false; for (const aValue of a.keys()) { if (!b.has(aValue)) return false; } return true; } function objectShallowEqual(a, b) { const keys3 = objectKeys(a); if (keys3.length !== objectKeys(b).length) return false; for (const key7 of keys3) { if (!hasProp(b, key7)) return false; if (key7 === "_owner" && hasProp(a, "$$typeof") && a.$$typeof) { continue; } if (!valueEqual(a[key7], b[key7])) return false; } return true; } function objectDeepEqual(a, b) { const keys3 = objectKeys(a); if (keys3.length !== objectKeys(b).length) return false; for (const key7 of keys3) { if (!hasProp(b, key7)) return false; if (key7 === "_owner" && hasProp(a, "$$typeof") && a.$$typeof) { continue; } if (!equal(a[key7], b[key7], true)) return false; } return true; } function equal(a, b, deep) { if (a === b) return true; if (!a || !b) return a !== a && b !== b; const typeA = typeof a; const typeB = typeof b; if (typeA !== typeB) return false; if (typeA !== "object") return false; const aIsArray = Array.isArray(a); const bIsArray = Array.isArray(b); if (aIsArray && bIsArray) { if (deep) { return arrayDeepEqual(a, b); } else { return arrayShallowEqual(a, b); } } else if (aIsArray !== bIsArray) { return false; } const aIsMap = a instanceof Map; const bIsMap = b instanceof Map; if (aIsMap && bIsMap) { if (deep) { return mapDeepEqual(a, b); } else { return mapShallowEqual(a, b); } } else if (aIsMap !== bIsMap) { return false; } const aIsSet = a instanceof Set; const bIsSet = b instanceof Set; if (aIsSet && bIsSet) { return setEqual(a, b); } else if (aIsSet !== bIsSet) { return false; } const dateA = a instanceof Date; const dateB = b instanceof Date; if (dateA && dateB) { return a.getTime() === b.getTime(); } else if (dateA !== dateB) { return false; } const regexpA = a instanceof RegExp; const regexpB = b instanceof RegExp; if (regexpA && regexpB) { return a.toString() === b.toString(); } else if (regexpA !== regexpB) { return false; } if (withEquals(a) && withEquals(b)) { return a.equals(b); } if (deep) { return objectDeepEqual(a, b); } else { return objectShallowEqual(a, b); } } function isEqual(a, b, deep = true) { try { return equal(a, b, deep); } catch (error) { if (error instanceof Error && /stack|recursion/iu.exec(error.message)) { console.warn("Warning: isEqual does not handle circular references.", error.name, error.message); return false; } throw error; } } // ../../library/src/router/RouterContext.tsx import React2, { useMemo } from "react"; // ../../library/src/router/useGetRouteCallback.ts import React from "react"; function useGetRouteCallback(routes) { return React.useCallback((routeId) => routes[routeId], [routes]); } // ../../library/src/router/RouterContext.tsx import { jsx as jsx2 } from "react/jsx-runtime"; var RouterContext = /* @__PURE__ */ (() => React2.createContext({}))(); function RouterAPIProvider({ api, children }) { return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: api, children }); } function useRouter() { return React2.useContext(RouterContext); } function RoutesProvider({ routes, children }) { const getRoute = useGetRouteCallback(routes); const api = useMemo(() => ({ getRoute }), [getRoute]); return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: api, children }); } // ../../library/src/router/useCurrentRoute.tsx import { jsx as jsx3 } from "react/jsx-runtime"; var CurrentRouteContext = /* @__PURE__ */ (() => React3.createContext({}))(); function useCurrentRoute() { var _a; const router = useRouter(); const override = useContext(CurrentRouteContext); const id = (override == null ? void 0 : override.routeId) ?? router.currentRouteId; const pathVariables = (override == null ? void 0 : override.routeId) ? override.pathVariables : router.currentPathVariables; const route = id ? (_a = router.getRoute) == null ? void 0 : _a.call(router, id) : void 0; return useMemo2(() => { if (!id || !route) return void 0; return { ...route, id, pathVariables }; }, [id, pathVariables, route]); } function useCurrentRouteKey() { const currentRoute = useCurrentRoute(); if (!currentRoute) return void 0; return `${currentRoute.id}-${JSON.stringify(currentRoute.pathVariables)}`; } function useCurrentRouteId() { var _a; return (_a = useCurrentRoute()) == null ? void 0 : _a.id; } function useOnRouteChange(cb) { const currentRoute = useCurrentRoute(); const lastRoute = React3.useRef(currentRoute); if (isEqual(lastRoute.current, currentRoute) || !currentRoute) return; lastRoute.current = currentRoute; cb(currentRoute); } // ../../library/src/router/useRoute.ts function useRoute(routeId) { var _a; const routerAPI = useRouter(); if (!routeId) return void 0; return (_a = routerAPI.getRoute) == null ? void 0 : _a.call(routerAPI, routeId); } // ../../library/src/router/utils.ts function getRouteElementId(route, hash2) { if (hash2 && route) { if (route.elements && hash2 in route.elements) { return route.elements[hash2]; } else { return hash2; } } return void 0; } var EMPTY_ARRAY = []; function monitorINPRelatedInputs(signal) { const inpRelatedInputs = ["pointerdown", "pointerup", "keydown", "keyup"]; const inpRelatedInputHandler = (event) => { const type = event.type; if (!inpRelatedInputs.includes(type)) return; performance.mark(`framer-navigation-input`, { detail: { type } }); }; for (let i = 0; i < inpRelatedInputs.length; i++) { document.addEventListener(inpRelatedInputs[i], inpRelatedInputHandler, { signal }); } return ()=> { for (let i = 0; i < inpRelatedInputs.length; i++) { document.removeEventListener(inpRelatedInputs[i], inpRelatedInputHandler); } }; } // ../../library/src/router/useRouteElementId.ts function useRouteElementId(id, targetRouteId) { const currentRoute=u seCurrentRoute(); const route=u seRoute(targetRouteId) ?? currentRoute; return React4.useMemo(()=> { if (!route) return id; return getRouteElementId(route, id); }, [id, route]); } // ../../library/src/router/useCurrentPathVariables.tsx function useCurrentPathVariables() { var _a; return (_a = useCurrentRoute()) == null ? void 0 : _a.pathVariables; } // ../../library/src/router/useRouteHandler.ts import React5 from "react"; // ../../library/src/router/useRoutePreloader.ts import { useEffect as useEffect2 } from "react"; // ../../library/src/utils/utils.ts function isFunction(value) { return typeof value === "function"; } function isBoolean(value) { return typeof value === "boolean"; } function isString(value) { return typeof value === "string"; } function isNumber(value) { return Number.isFinite(value); } function isArray(value) { return Array.isArray(value); } function isObject2(value) { return value !== null && typeof value === "object" && !isArray(value); } function isUndefined(value) { return typeof value === "undefined"; } function isNull(value) { return value === null; } function isNullish(value) { return value == null; } function isValidDate(value) { return value instanceof Date && !Number.isNaN(value.getTime()); } function isGenerator2(value) { return isObject2(value) && isFunction(value.return); } var noop2 = () => { }; var isWindow = typeof window !== "undefined"; var isBot = /* @__PURE__ */ (() => isWindow && /bot|-google|google-|yandex|ia_archiver|crawl|spider/iu.test(navigator.userAgent))(); var supportsRequestIdleCallback = isWindow && typeof window.requestIdleCallback === "function"; var requestIdleCallback = /* @__PURE__ */ (() => ( // eslint-disable-next-line compat/compat,framer-studio/tscompat supportsRequestIdleCallback ? window.requestIdleCallback : setTimeout ))(); function encodeSVGForCSS(svg) { return `url('data:image/svg+xml,${svg.replaceAll("#", "%23").replaceAll("'", "%27")}')`; } // ../../library/src/utils/safeWindow.ts var mockWindow = { addEventListener: () => { }, removeEventListener: () => { }, dispatchEvent: () => false, ResizeObserver: void 0, onpointerdown: false, onpointermove: false, onpointerup: false, ontouchstart: false, ontouchmove: false, ontouchend: false, onmousedown: false, onmousemove: false, onmouseup: false, devicePixelRatio: 1, scrollX: 0, scrollY: 0, location: { hash: "", hostname: "", href: "", origin: "", pathname: "", search: "" }, document: { baseURI: "", cookie: "", referrer: null }, setTimeout: () => 0, clearTimeout: () => { }, setInterval: () => 0, clearInterval: () => { }, requestAnimationFrame: () => 0, cancelAnimationFrame: () => { }, requestIdleCallback: () => 0, getSelection: () => null, matchMedia: (query) => { return { matches: false, media: query, onchange: () => { }, addEventListener: () => { }, removeEventListener: () => { }, addListener: () => { }, removeListener: () => { }, dispatchEvent: () => false }; }, innerHeight: 0, innerWidth: 0, SVGSVGElement: {}, scheduler: void 0, open: function(_url, _target, _features) { }, __framer_events: [] }; var safeWindow = !isWindow ? mockWindow : window; // ../../library/src/utils/yield.ts var canUseYield = /* @__PURE__ */ (() => safeWindow.scheduler && "yield" in safeWindow.scheduler)(); var canUsePostTask = /* @__PURE__ */ (() => safeWindow.scheduler && "postTask" in safeWindow.scheduler)(); var pendingResolvers = /* @__PURE__ */ new Set(); function resolvePendingPromises() { for (const resolve of pendingResolvers) resolve(); pendingResolvers.clear(); } function yieldUnlessUrgent(options) { return new Promise((resolve) => { pendingResolvers.add(resolve); if (document.hidden) { resolvePendingPromises(); return; } document.addEventListener("visibilitychange", resolvePendingPromises); document.addEventListener("pagehide", resolvePendingPromises); frame.read(() => { const resolveFn = () => { var _a; pendingResolvers.delete(resolve); if ((_a = options == null ? void 0 : options.signal) == null ? void 0 : _a.aborted) return; resolve(); }; void schedulerYield(options).then(resolveFn); }); return; }); } function interactionResponse(options) { return new Promise((resolve) => { setTimeout(resolve, 100); frame.read( () => { void schedulerYield(options).then(resolve); }, false, // In some cases, interactionResponse might be called in a rAF. This means, we should right away call `schedulerYield`, as the next paint follows immediately. true ); }); } function schedulerYield(options) { const priority = options == null ? void 0 : options.priority; const canUseModernAPI = canUseYield || canUsePostTask; if (!canUseModernAPI) { if (priority === "user-blocking") { return Promise.resolve(); } return new Promise((resolve) => { setTimeout(resolve, priority === "background" ? 1 : 0); }); } if (priority === "background") { return new Promise((resolve) => { setTimeout(resolve, 1); }); } if (canUseYield) { return safeWindow.scheduler.yield(options).catch(noop2); } return safeWindow.scheduler.postTask(() => { }, options).catch(noop2); } function yieldToMain(options) { const { continueAfter, ensureContinueBeforeUnload, ...schedulerOptions } = options ?? {}; if (ensureContinueBeforeUnload) { return yieldUnlessUrgent(schedulerOptions); } if (continueAfter === "paint") { return interactionResponse(schedulerOptions); } return schedulerYield(schedulerOptions); } // ../../library/src/router/useRoutePreloader.ts var shouldPreloadBasedOnUA = !isBot; function useRoutePreloader(routeIds, enabled = true) { const { getRoute } = useRouter(); useEffect2(() => { if (!getRoute || !enabled || !shouldPreloadBasedOnUA) return; for (const routeId of routeIds) { void preloadRoute(getRoute(routeId)); } }, [routeIds, getRoute, enabled]); } async function preloadRoute(route) { if (!shouldPreloadBasedOnUA || !route) return; const component = route.page; if (!component || !isLazyComponentType(component)) return; await yieldToMain(); try { await component.preload(); } catch (e) { if (false) console.warn("Preload failed", route, e); } } // ../../library/src/router/useRouteHandler.ts function useRouteHandler(routeId, preload = false, elementId) { const { navigate } = useRouter(); useRoutePreloader([routeId], preload); const handler = React5.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId]); return handler; } // ../../library/src/router/history.ts import { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react"; // ../../library/src/utils/sendTrackingEvent.ts var pageviewEventVersion = 2; function sendTrackingEvent(eventType, eventData, sendOn = "lazy") { var _a; (_a = safeWindow.__framer_events) == null ? void 0 : _a.push([eventType, eventData, sendOn]); switch (eventType) { case "published_site_click": { const { trackingId, href } = eventData; if (trackingId) { document.dispatchEvent(new CustomEvent("framer:click", { detail: { trackingId, href } })); } break; } case "published_site_form_submit": { const { trackingId } = eventData; if (trackingId) { document.dispatchEvent(new CustomEvent("framer:formsubmit", { detail: { trackingId } })); } break; } // NOTE: keep in sync with exportToHTML.ts, the initial pageview is sent from there case "published_site_pageview": { const { framerLocale } = eventData; document.dispatchEvent(new CustomEvent("framer:pageview", { detail: { framerLocale } })); break; } } } // ../../library/src/router/computeRelativePath.ts function computeRelativePath(from, to) { if (!from.startsWith("/") || !to.startsWith("/")) { throw new Error("from/to paths are expected to be absolute"); } const [fromDir] = getDirAndFile(from); const [toDir, toFile] = getDirAndFile(to); let relativePath = relative(fromDir, toDir); if (relativePath === "") relativePath = "."; if (!relativePath.startsWith(".") && !relativePath.startsWith("/")) { relativePath = "./" + relativePath; } return relativePath + "/" + toFile; } function getDirAndFile(path) { const index = path.lastIndexOf("/"); return [path.substring(0, index + 1), path.substring(index + 1)]; } var CHAR_DOT = 46; var CHAR_FORWARD_SLASH = 47; var StringPrototypeCharCodeAt = (str, index) => str.charCodeAt(index); var StringPrototypeLastIndexOf = (str, searchString) => str.lastIndexOf(searchString); var StringPrototypeSlice = (str, start, end) => str.slice(start, end); function relative(from, to) { if (from === to) return ""; from = "/" + normalizeString(from); to = "/" + normalizeString(to); if (from === to) return ""; const fromStart = 1; const fromEnd = from.length; const fromLen = fromEnd - fromStart; const toStart = 1; const toLen = to.length - toStart; const length = fromLen < toLen ? fromLen : toLen; let lastCommonSep=- 1; let i=0 ; for (; i < length; i++) { const fromCode=S tringPrototypeCharCodeAt(from, fromStart + i); if (fromCode !==S tringPrototypeCharCodeAt(to, toStart + i)) break; else if (fromCode===C HAR_FORWARD_SLASH) lastCommonSep=i ; } if (i===l ength) { if (toLen> length) { if (StringPrototypeCharCodeAt(to, toStart + i) === CHAR_FORWARD_SLASH) { return StringPrototypeSlice(to, toStart + i + 1); } if (i === 0) { return StringPrototypeSlice(to, toStart + i); } } else if (fromLen > length) { if (StringPrototypeCharCodeAt(from, fromStart + i) === CHAR_FORWARD_SLASH) { lastCommonSep = i; } else if (i === 0) { lastCommonSep = 0; } } } let out = ""; for (i = fromStart + lastCommonSep + 1; i <=f romEnd; ++i) { if (i===f romEnd || StringPrototypeCharCodeAt(from, i)===C HAR_FORWARD_SLASH) { out +=o ut.length===0 ? ".." : "/.." ; } } return `${out}${StringPrototypeSlice(to, toStart + lastCommonSep)}`; } var allowAboveRoot=f alse; var separator="/" ; var isPathSeparator=( code)=> code === CHAR_FORWARD_SLASH; function normalizeString(path) { let res = ""; let lastSegmentLength = 0; let lastSlash = -1; let dots = 0; let code = 0; for (let i = 0; i <=p ath.length; ++i) { if (i < path.length) code=S tringPrototypeCharCodeAt(path, i); else if (isPathSeparator(code)) break; else code=C HAR_FORWARD_SLASH; if (isPathSeparator(code)) { if (lastSlash===i - 1 || dots===1 ) { } else if (dots===2 ) { if (res.length < 2 || lastSegmentLength !==2 || StringPrototypeCharCodeAt(res, res.length - 1) !==C HAR_DOT || StringPrototypeCharCodeAt(res, res.length - 2) !==C HAR_DOT) { if (res.length> 2) { const lastSlashIndex = StringPrototypeLastIndexOf(res, separator); if (lastSlashIndex === -1) { res = ""; lastSegmentLength = 0; } else { res = StringPrototypeSlice(res, 0, lastSlashIndex); lastSegmentLength = res.length - 1 - StringPrototypeLastIndexOf(res, separator); } lastSlash = i; dots = 0; continue; } else if (res.length !== 0) { res = ""; lastSegmentLength = 0; lastSlash = i; dots = 0; continue; } } if (allowAboveRoot) { res += res.length > 0 ? `${separator}..` : ".."; lastSegmentLength = 2; } } else { if (res.length > 0) res += `${separator}${StringPrototypeSlice(path, lastSlash + 1, i)}`; else res = StringPrototypeSlice(path, lastSlash + 1, i); lastSegmentLength = i - lastSlash - 1; } lastSlash = i; dots = 0; } else if (code === CHAR_DOT && dots !== -1) { ++dots; } else { dots = -1; } } return res; } // ../../library/src/router/customNotFoundPagePaths.ts var customNotFoundPagePaths = /* @__PURE__ */ new Set(["/404.html", "/404", "/404/"]); // ../../library/src/router/pathVariables.ts var pathVariablesRegExpRaw = ":([a-z]\\w*)"; var pathVariablesRegExp = /* @__PURE__ */ new RegExp(pathVariablesRegExpRaw, "gi"); // ../../library/src/router/fillPathVariables.ts function fillPathVariables(path, variables) { return path.replace(pathVariablesRegExp, (match, name) => { const value = variables[name]; if (typeof value !== "string" || value.length === 0) return match; return encodeURIComponent(value); }); } // ../../library/src/router/forwardQueryParams.ts function forwardCurrentQueryParams(href) { const queryParamsString = typeof window !== "undefined" ? window.location.search : ""; if (!queryParamsString) { return href; } return forwardQueryParams(queryParamsString, href); } function forwardQueryParams(queryParamsString, href) { const startOfHash = href.indexOf("#"); const hrefWithoutHash = startOfHash === -1 ? href : href.substring(0, startOfHash); const hash2 = startOfHash === -1 ? "" : href.substring(startOfHash); const startOfSearch = hrefWithoutHash.indexOf("?"); if (startOfSearch === -1) { return hrefWithoutHash + queryParamsString + hash2; } const currentSearchParams = new URLSearchParams(queryParamsString); const newSearchString = hrefWithoutHash.substring(startOfSearch + 1); const newSearchParams = new URLSearchParams(newSearchString); for (const [key7, value] of currentSearchParams) { if (!newSearchParams.has(key7)) { newSearchParams.append(key7, value); } } return hrefWithoutHash.substring(0, startOfSearch + 1) + newSearchParams.toString() + hash2; } // ../../library/src/router/getLocalizedNavigationPath.ts async function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils) { var _a; let resultPath = path; let isMissingInLocale = false; const resultPathVariables = { ...pathVariables }; const matches = Array.from(resultPath.matchAll(pathVariablesRegExp)); const replacements = await Promise.all( matches.map(async (match) => { var _a2; const pathVariableWithDelimiter = match == null ? void 0 : match[0]; const pathVariableValue = match == null ? void 0 : match[1]; if (!pathVariableWithDelimiter || !pathVariableValue) { throw new Error("Failed to replace path variables: unexpected regex match group"); } const currentSlug = pathVariables[pathVariableValue]; if (!currentSlug || !isString(currentSlug)) { throw new Error(`No slug found for path variable ${pathVariableValue}`); } const utils = await ((_a2 = collectionUtils == null ? void 0 : collectionUtils[collectionId]) == null ? void 0 : _a2.call(collectionUtils)); if (!utils || !currentLocale) { return currentSlug; } const recordId = await utils.getRecordIdBySlug(currentSlug, currentLocale); if (!recordId) return currentSlug; const nextSlug = await utils.getSlugByRecordId(recordId, nextLocale); if (!nextSlug) { isMissingInLocale = true; const defaultLocaleSlug = await utils.getSlugByRecordId(recordId, defaultLocale); if (defaultLocaleSlug) { resultPathVariables[pathVariableValue] = defaultLocaleSlug; } return defaultLocaleSlug ?? currentSlug; } resultPathVariables[pathVariableValue] = nextSlug; return nextSlug; }) ); let lastIndex = 0; let replacedPath = ""; let hasMatch = false; for (let i = 0; i < matches.length; i++) { const match=m atches[i]; const replacement=r eplacements[i]; if (!match || !replacement) continue; replacedPath +=r esultPath.substring(lastIndex, match.index); lastIndex=( match.index ?? 0) + (((_a=m atch[0])==n ull ? void 0 : _a.length) ?? 0); replacedPath +=r eplacements[i]; hasMatch=t rue; } if (hasMatch) { replacedPath +=r esultPath.substring(lastIndex); resultPath=r eplacedPath; } return { path: resultPath, pathVariables: resultPathVariables, isMissingInLocale }; } async function getLocalizedNavigationPath({ currentLocale, nextLocale, defaultLocale, route, pathVariables, collectionUtils, preserveQueryParams }) { const { path }=r oute; let result={ path, pathVariables, isMissingInLocale: false }; if (!path) return result; if (pathVariables && route.collectionId) { try { const pathReplacement=a wait replacePathVariables( path, currentLocale, nextLocale, defaultLocale, route.collectionId, pathVariables, collectionUtils ); result=p athReplacement; } catch { } } if (nextLocale.slug) { result.path="/" + nextLocale.slug + result.path; } if (preserveQueryParams && result.path) { result.path=f orwardCurrentQueryParams(result.path); } return result; } // ../../library/src/router/getSitePrefix.ts function getSitePrefix(siteCanonicalURL) { if (!siteCanonicalURL) return "" ; let url; try { url=n ew URL(siteCanonicalURL); } catch { return "" ; } if (url.pathname==="/" || window.location.origin !==u rl.origin) return "" ; return url.pathname.endsWith( "/" ) ? url.pathname.slice(0, -1) : url.pathname; } // ../../library/src/router/pageEffects/useViewTransition.ts import { useCallback, useEffect as useEffect3, useRef } from "react" ; // ../../library/src/router/pageEffects/PageEffectsContext.tsx import React6 from "react" ; import { jsx as jsx4 } from "react/jsx-runtime" ; var defaultSitePageEffects={ global: void 0, routes: {} }; var PageEffectsContext=/ * @__PURE__ */ React6.createContext(defaultSitePageEffects); function PageEffectsProvider({ children, value }) { return /* @__PURE__ */ jsx4(PageEffectsContext.Provider, { value, children }); } function usePageEffects() { return React6.useContext(PageEffectsContext); } // ../../library/src/router/pageEffects/getPageEffect.ts function getPageEffectForRoute(currentRouteId, nextRouteId, { global, routes }) { var _a; return ((_a=r outes[currentRouteId])==n ull ? void 0 : _a[nextRouteId]) || global; } // ../../library/src/router/pageEffects/cssGeneration/linearEasing.ts var step=1 0; var maxDuration=1 e4; function createLinearEasing(generator) { let time2=s tep; let state=g enerator.next(0); const keyframes2=[ state.value]; while (!state.done && time2 < maxDuration) { state=g enerator.next(time2); keyframes2.push(state.value); time2 +=s tep; } if (keyframes2.length===1 ) keyframes2.push(state.value); return { easing: `linear(${keyframes2.join( "," )})`, duration: time2 - step }; } // ../../library/src/router/pageEffects/cssGeneration/masks.ts var cssVariable=( name)=> `--view-transition-${name}`; function parseUnit(value) { return [parseFloat(value), value.endsWith("px") ? "px" : "%"]; } function calcMaskPosition(mask) { const { innerWidth, innerHeight } = window; const [x, xUnit] = parseUnit(mask.x); const [y, yUnit] = parseUnit(mask.y); return { x: xUnit === "px" ? x : innerWidth * (x / 100), y: yUnit === "px" ? y : innerHeight * (y / 100) }; } var conic = { makeKeyframe: (mask, progress2, page) => { let percentage = 0; if (page === "exit" && mask.angularDirection === "clockwise" && progress2 === "start" || page === "exit" && mask.angularDirection === "counter-clockwise" && progress2 === "end" || page === "enter" && mask.angularDirection === "counter-clockwise" && progress2 === "start" || page === "enter" && mask.angularDirection === "clockwise" && progress2 === "end") { percentage = mask.sweepAngle / 360 * 100; } return `${cssVariable("conic-offset")}: ${percentage}%;`; }, makeStyles: (mask, page) => { const offsetToken = `var(${cssVariable("conic-offset")})`; const isTransparentToBlack = page === "exit" && mask.angularDirection === "clockwise" || page === "enter" && mask.angularDirection === "counter-clockwise"; const firstColor = isTransparentToBlack ? "transparent" : "black"; const secondColor = isTransparentToBlack ? "black" : "transparent"; let gradient = `conic-gradient(from `; gradient += `${mask.angle}deg at ${mask.x} ${mask.y}, `; gradient += `${firstColor} 0%, ${firstColor} ${offsetToken}, `; gradient += `${secondColor} ${offsetToken}, ${secondColor} 100%)`; return `mask-image: ${gradient}; -webkit-mask-image: ${gradient};`; }, makePropertyRules: () => ` @property ${cssVariable("conic-offset")} { syntax: ' '; initial-value: 0%; inherits: false; } ` }; var circle = { makeKeyframe: (mask, progress2) => { const { x, y } = calcMaskPosition(mask); if (progress2 === "start") { return `clip-path: circle(0 at ${x}px ${y}px);`; } else { const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)); return `clip-path: circle(${endRadius}px at ${x}px ${y}px);`; } } }; var inset = { makeKeyframe: (mask, progress2) => { const { x, y } = calcMaskPosition(mask); const bottom = window.innerHeight - y; const right = window.innerWidth - x; return progress2 === "start" ? `clip-path: inset(${y}px ${right}px ${bottom}px ${x}px round ${mask.round}px);` : `clip-path: inset(0 round 0);`; } }; var blinds = { makeKeyframe: (mask, progress2, page) => { const [, unit] = parseUnit(mask.width); let width = `0${unit}`; if (progress2 === "start" && page === "exit" || progress2 === "end" && page === "enter") { width = mask.width; } return `${cssVariable("blinds-width")}: ${width};`; }, makeStyles: (mask, page) => { const widthToken = `var(${cssVariable("blinds-width")})`; const firstColor = page === "exit" ? "transparent" : "black"; const secondColor = page === "exit" ? "black" : "transparent"; let gradient = `repeating-linear-gradient(`; gradient += mask.angle + 90 + "deg, "; gradient += `${firstColor} 0px, ${firstColor} ${widthToken}, `; gradient += `${secondColor} ${widthToken}, ${secondColor} ${mask.width})`; return `mask-image: ${gradient}; -webkit-mask-image: ${gradient};`; }, makePropertyRules: () => { return ` @property ${cssVariable("blinds-width")} { syntax: ' '; initial-value: 0px; inherits: false; } `; } }; var wipe = { makeKeyframe: (_mask, progress2, page) => { const offset = progress2 === "start" && page === "exit" || progress2 === "end" && page === "enter" ? 1 : 0; return `${cssVariable("wipe-offset")}: ${offset};`; }, makeStyles: (mask, page) => { const offsetToken = `var(${cssVariable("wipe-offset")})`; const firstColor = page === "exit" ? "transparent" : "black"; const secondColor = page === "exit" ? "black" : "transparent"; let gradient = `linear-gradient(`; gradient += mask.angle + 90 + "deg, "; gradient += `${firstColor} calc(calc(0% - ${mask.width}) + calc(calc(100% + ${mask.width}) * ${offsetToken})), `; gradient += `${secondColor} calc(calc(100% + ${mask.width}) * ${offsetToken}))`; return `mask-image: ${gradient}; -webkit-mask-image: ${gradient};`; }, makePropertyRules: () => { return ` @property ${cssVariable("wipe-offset")} { syntax: ' '; initial-value: 0; inherits: false; } `; } }; var maskGenerators = { circle, conic, inset, blinds, wipe }; // ../../library/src/router/pageEffects/cssGeneration/page.ts var restState = { opacity: 1, x: "0px", y: "0px", scale: 1, rotate: 0, rotateX: 0, rotateY: 0, mask: void 0 }; function valuesToCSSKeyframes(values, progress2, page, maskGenerator) { var _a; let keyframes2 = ` opacity: ${values.opacity}; transform: translate(${values.x}, ${values.y}) scale(${values.scale}) rotateX(${values.rotateX}deg) rotateY(${values.rotateY}deg) rotateZ(${values.rotate}deg); `; if (values.mask) { keyframes2 += ((_a = maskGenerator == null ? void 0 : maskGenerator.makeKeyframe) == null ? void 0 : _a.call(maskGenerator, values.mask, progress2, page)) || ""; } return keyframes2; } function getMaskGenerator(type) { return type ? maskGenerators[type] : void 0; } function createPageTransitionRules(page, { transition, ...values }) { var _a; const name = "view-transition-" + page; const settings = { duration: "0s", easing: "linear" }; if (transition.type === "tween") { settings.duration = transition.duration + "s"; settings.easing = `cubic-bezier(${transition.ease.join(",")})`; } else if (isSpringTransition(transition)) { const { easing, duration } = createLinearEasing( spring({ keyframes: [0, 1], ...getSpringOptions(transition), restDelta: 1e-3, restSpeed: 1e-4 }) ); settings.duration = duration + "ms"; settings.easing = easing; } const maskGenerator = getMaskGenerator((_a = values == null ? void 0 : values.mask) == null ? void 0 : _a.type); let startKeyframes = valuesToCSSKeyframes(values, "start", page, maskGenerator); let endKeyframes = valuesToCSSKeyframes({ ...restState, mask: values.mask }, "end", page, maskGenerator); if (page === "exit") { ; [startKeyframes, endKeyframes] = [endKeyframes, startKeyframes]; } return ` ${values.mask && (maskGenerator == null ? void 0 : maskGenerator.makePropertyRules) ? maskGenerator.makePropertyRules(values.mask) : ""} @keyframes ${name} { 0% { ${startKeyframes} } 100% { ${endKeyframes} } } ::view-transition-${page === "enter" ? "new" : "old"}(root) { animation-name: ${name}; animation-duration: ${settings.duration}; animation-delay: ${transition.delay}s; animation-timing-function: ${settings.easing}; animation-fill-mode: both; ${values.mask && (maskGenerator == null ? void 0 : maskGenerator.makeStyles) ? maskGenerator.makeStyles(values.mask, page) : ""} } `; } function isSpringTransition(transition) { return transition.type === "spring"; } function getSpringOptions(transition) { if (transition.durationBasedSpring) { return { duration: transition.duration * 1e3, bounce: transition.bounce }; } return { stiffness: transition.stiffness, damping: transition.damping, mass: transition.mass }; } // ../../library/src/router/pageEffects/cssGeneration/index.ts var VIEW_TRANSITION_STYLES_ID = "view-transition-styles"; var defaultPageTransition = { x: "0px", y: "0px", scale: 1, opacity: 1, rotate3d: false, rotate: 0, rotateX: 0, rotateY: 0, mask: void 0, transition: { type: "tween", delay: 0, duration: 0.2, ease: [0.27, 0, 0.51, 1], stiffness: 400, damping: 30, mass: 1 } }; function createViewTransitionStylesheet({ exit = defaultPageTransition, enter }) { const styleElement = document.createElement("style"); styleElement.id = VIEW_TRANSITION_STYLES_ID; let styleContent = ` @media (prefers-reduced-motion) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } `; const disableMixPlusLighter = exit.mask || enter.mask || exit.opacity || enter.opacity || exit.transition.delay || enter.transition.delay; if (disableMixPlusLighter) { styleContent += ` ::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; } `; } styleContent += ` ::view-transition-old(*), ::view-transition-new(*) { backface-visibility: hidden; } `; styleContent += createPageTransitionRules("exit", exit); styleContent += createPageTransitionRules("enter", enter); styleElement.textContent = styleContent; document.head.appendChild(styleElement); } function removeViewTransitionStylesheet() { requestIdleCallback(() => { frame.render(() => { performance.mark("framer-vt-remove"); const element = document.getElementById(VIEW_TRANSITION_STYLES_ID); if (element) { document.head.removeChild(element); } }); }); } // ../../library/src/router/pageEffects/viewTransition.ts var noop3 = () => { }; function supportsViewTransitions() { return Boolean(document.startViewTransition); } function addVTStylesheetAfterInRender(effect) { return new Promise((resolve) => { frame.render(() => { performance.mark("framer-vt-style"); createViewTransitionStylesheet(effect); resolve(); }); }); } async function startViewTransition(updateView, effect, signal) { if (!supportsViewTransitions()) { void updateView(); return; } await addVTStylesheetAfterInRender(effect); if (signal == null ? void 0 : signal.aborted) return; performance.mark("framer-vt"); const transition = document.startViewTransition(async () => { performance.mark("framer-vt-freeze"); if (signal == null ? void 0 : signal.aborted) return; else signal == null ? void 0 : signal.addEventListener("abort", () => transition.skipTransition()); await updateView(); }); transition.updateCallbackDone.then(() => { performance.mark("framer-vt-unfreeze"); }).catch(noop3); Promise.all([transition.ready, transition.finished]).then(() => { performance.mark("framer-vt-finished"); removeViewTransitionStylesheet(); }).catch(noop3); return transition; } // ../../library/src/router/pageEffects/useViewTransition.ts function useViewTransition() { const sitePageEffects = usePageEffects(); const resolveHasPainted = useRef(void 0); useEffect3(() => { if (resolveHasPainted.current) { resolveHasPainted.current(); resolveHasPainted.current = void 0; } }); return useCallback( (currentRouteId, nextRouteId, update, signal) => { const pageEffect = getPageEffectForRoute(currentRouteId, nextRouteId, sitePageEffects); if (pageEffect) { const hasPainted = new Promise((resolve) => { resolveHasPainted.current = resolve; }); return startViewTransition( async () => { update(); await hasPainted; }, pageEffect, signal ); } update(); }, [sitePageEffects] ); } // ../../library/src/router/routerDomUtils.ts function updateCanonicalURL(url, prevUrl) { requestIdleCallback(() => { const canonical = document.querySelector("link[rel='canonical']"); if (!canonical) return; const newURL = new URL(url, prevUrl); newURL.search = ""; canonical.setAttribute("href", newURL.toString()); }); } var announceDiv; var announceNavigation = () => { if (!announceDiv) { announceDiv = document.createElement("div"); announceDiv.setAttribute("aria-live", "assertive"); announceDiv.setAttribute("aria-atomic", "true"); announceDiv.style.position = "absolute"; announceDiv.style.transform = "scale(0)"; document.body.append(announceDiv); } setTimeout(() => { announceDiv.textContent = document.title; }, 60); }; // ../../library/src/router/useMonitorNextPaintAfterRender.ts import { useCallback as useCallback2, useRef as useRef2 } from "react"; // ../../library/src/utils/useAfterPaintEffect.ts import { useLayoutEffect } from "react"; function useAfterPaintEffect(effectFn, deps, options, useEffectFn = useLayoutEffect) { useEffectFn(() => { const runAfterPaint = async (fn) => { await yieldToMain({ ...options, continueAfter: "paint" }); return fn(); }; const runPromise = runAfterPaint(effectFn); return () => { void (async () => { const cleanup = await runPromise; if (!cleanup) return; void runAfterPaint(cleanup); })(); }; }, deps); } // ../../library/src/router/useMonitorNextPaintAfterRender.ts function useMonitorNextPaintAfterRender(label) { const resolveHasPainted = useRef2(void 0); useAfterPaintEffect( () => { if (resolveHasPainted.current) { resolveHasPainted.current(); resolveHasPainted.current = void 0; } }, void 0, // user-blocking ensures we get the correct timings here. Other priorities might delay this effect a little bit. { priority: "user-blocking" } ); return useCallback2( (measureDetail) => { const hasPainted = new Promise((resolve) => { resolveHasPainted.current = resolve; }); if (!label) return { promise: hasPainted, measureDetail, ignore: null }; const startLabel = `${label}-start`; const endLabel = `${label}-end`; let ignore = false; performance.mark(startLabel); hasPainted.finally(() => { if (ignore) return; performance.mark(endLabel); performance.measure(label, { start: startLabel, end: endLabel, detail: measureDetail }); }).catch((e) => { console.error(e); }); return { promise: hasPainted, measureDetail, ignore: () => { var _a; ignore = true; (_a = resolveHasPainted.current) == null ? void 0 : _a.call(resolveHasPainted); resolveHasPainted.current = void 0; } }; }, [label] ); } // ../../library/src/router/history.ts async function pushRouteState(routeId, route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, localeId, preserveQueryParams, siteCanonicalURL }, isNavigationTransition = false) { const { path } = route; if (!path) return; const newPath = getPathForRoute(route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, preserveQueryParams, siteCanonicalURL }); try { return await pushHistoryState({ routeId, hash: hash2, pathVariables, localeId }, newPath, isNavigationTransition); } catch { } } function isHistoryState(data2) { const routeIdKey = "routeId"; return isObject2(data2) && isString(data2[routeIdKey]); } function replaceHistoryState(data2, url, ignoreReplaceStateWrapper = false) { performance.mark("framer-history-replace"); const replaceState = ignoreReplaceStateWrapper ? window.history.__proto__.replaceState : window.history.replaceState; replaceState.call(window.history, data2, "", url); } var maybeHasPopstateBug = true; var isImpactedPopstateBugChromiumVersion = /* @__PURE__ */ (() => { if (typeof navigator === "undefined") return false; const userAgent = navigator.userAgent; const chromePos = userAgent.indexOf("Chrome/"); const chromiumVersion = +userAgent.slice(chromePos + 7, userAgent.indexOf(".", chromePos)); return chromiumVersion > 101 && chromiumVersion < 128; })(); async function pushHistoryState(data2, url, isNavigationTransition=f alse) { performance.mark( "framer-history-push" ); updateCanonicalURL(url, window.location.href); if (!isNavigationTransition) { window.history.pushState(data2, "" , url); return; } let popstateCalled=f alse, popstateListener; if (maybeHasPopstateBug) { popstateListener=( )=> { popstateCalled = true; if (isImpactedPopstateBugChromiumVersion) return; const msg = "Popstate called after intercept(). Please report this to the Framer team."; console.error(msg); sendTrackingEvent("published_site_load_recoverable_error", { message: msg }); }; window.addEventListener("popstate", popstateListener, { once: true }); } if (isImpactedPopstateBugChromiumVersion && maybeHasPopstateBug) { window.history.__proto__.pushState.call(window.history, data2, "", url); } else { window.history.pushState(data2, "", url); } if (maybeHasPopstateBug) { queueMicrotask(() => { if (popstateCalled) return; maybeHasPopstateBug = false; window.removeEventListener("popstate", popstateListener); return; }); } } function useReplaceInitialState({ disabled, routeId, initialPathVariables, initialLocaleId }) { useLayoutEffect2(() => { if (disabled) return; performance.mark("framer-history-set-initial-state"); replaceHistoryState( { routeId, pathVariables: initialPathVariables, localeId: initialLocaleId }, void 0, true ); }, []); } var supportsNavigationAPI = /* @__PURE__ */ (() => { var _a; return isWindow && typeof ((_a = window.navigation) == null ? void 0 : _a.back) === "function"; })(); function usePopStateHandler(currentRouteId, setCurrentRouteId) { const startViewTransition2 = useViewTransition(); const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender("framer-route-change"); const viewTransitionReady = useRef3(void 0); const popStateHandler = useCallback3( async ({ state }) => { var _a, _b, _c, _d, _e, _f; if (((_a = window.navigation) == null ? void 0 : _a.transition) && ((_c = (_b = window.navigation) == null ? void 0 : _b.transition) == null ? void 0 : _c.navigationType) !== "traverse") return; if (!isObject2(state)) return; const { routeId, hash: hash2, pathVariables, localeId } = state; if (!isString(routeId)) return; const nextRender = monitorNextPaintAfterRender({ popstate: true }); const stopMonitoringINPRelatedInputs = monitorINPRelatedInputs(); void nextRender.promise.finally(stopMonitoringINPRelatedInputs); const changeRoute = () => { setCurrentRouteId( routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, window.location.pathname + window.location.search + window.location.hash, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false ); }; const viewTransition = await startViewTransition2(currentRouteId.current, routeId, changeRoute); const navigationTransition = (_d = window.navigation) == null ? void 0 : _d.transition; await ((viewTransition == null ? void 0 : viewTransition.updateCallbackDone) ?? Promise.resolve()).then((_e = viewTransitionReady.current) == null ? void 0 : _e.resolve).catch((_f = viewTransitionReady.current) == null ? void 0 : _f.reject); await nextRender.promise; try { await (navigationTransition == null ? void 0 : navigationTransition.finished); } catch (error) { console.warn("Popstate transition failed", error); } announceNavigation(); updateCanonicalURL(window.location.href); }, [currentRouteId, monitorNextPaintAfterRender, setCurrentRouteId, startViewTransition2] ); const traversalHandler = useCallback3((event) => { if (event.navigationType !== "traverse" || !event.canIntercept) return; event.intercept({ async handler() { await new Promise((resolve, reject) => { viewTransitionReady.current = { resolve, reject }; }); viewTransitionReady.current = void 0; }, scroll: "after-transition" }); }, []); useEffect4(() => { window.addEventListener("popstate", popStateHandler); if (supportsNavigationAPI) window.navigation.addEventListener("navigate", traversalHandler); return () => { window.removeEventListener("popstate", popStateHandler); if (supportsNavigationAPI) window.navigation.removeEventListener("navigate", traversalHandler); }; }, [popStateHandler, traversalHandler]); } function getHashForRoute(hash2, route, hashVariables) { const resolvedHash = getRouteElementId(route, hash2); if (!resolvedHash) return void 0; const variables = Object.assign({}, route == null ? void 0 : route.elements, hashVariables); return resolvedHash.replace(pathVariablesRegExp, (m2, p1) => variables[p1] ?? m2); } function getPathForRoute(route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, hashVariables, relative: relative2 = true, preserveQueryParams, onlyHash = false, siteCanonicalURL }) { const resolvedHash = getHashForRoute(hash2, route, hashVariables); if (onlyHash) return resolvedHash ?? ""; let currentPath = currentRoutePath ?? "/"; if (currentPathVariables) { currentPath = currentPath.replace(pathVariablesRegExp, (m2, p1) => String(currentPathVariables[p1] || m2)); } const targetPath = (route == null ? void 0 : route.path) ?? "/"; let path = targetPath; if (pathVariables) { path = path.replace(pathVariablesRegExp, (m2, p1) => String(pathVariables[p1] || m2)); } const isSamePageHashNavigation = currentPath === path && resolvedHash; if (relative2) { if (customNotFoundPagePaths.has(currentPath) && typeof window !== "undefined") { const sitePrefix = getSitePrefix(siteCanonicalURL); path = computeRelativePath(window.location.pathname, sitePrefix + path); } else { path = computeRelativePath(currentPath, path); } } if (preserveQueryParams || isSamePageHashNavigation) { path = forwardCurrentQueryParams(path); } if (resolvedHash) { path = `${path}#${resolvedHash}`; } return path; } async function handleRedirectForMissingSlugs(route, pathVariables, nextLocale) { if (!route.path) return false; if (!pathVariables) return false; const prefix2 = nextLocale.slug ? `/${nextLocale.slug}` : ""; const nextLocaleWithDefaultSlugPath = `${prefix2}${fillPathVariables(route.path, pathVariables)}`; const response = await fetch(nextLocaleWithDefaultSlugPath, { method: "HEAD", redirect: "manual" }); const isRedirect = response.type === "opaqueredirect"; if (isRedirect) { window.location.href = window.location.origin + nextLocaleWithDefaultSlugPath; return true; } return false; } async function switchLocale(options) { const result = await getLocalizedNavigationPath(options); if (!result) return; try { localStorage.setItem("preferredLocale", options.nextLocale.code); } catch { } try { if (!isString(result.path)) { throw new Error("Expected result.path to be a string"); } if (result.isMissingInLocale) { const hasRedirect = await handleRedirectForMissingSlugs( options.route, result.pathVariables, options.nextLocale ); if (hasRedirect) return; } } catch { } return result; } function pushLoadMoreHistory(hash2, paginationInfo) { try { const currentHistoryState = window.history.state; if (!isHistoryState(currentHistoryState)) return; const isInitialLoad = (currentHistoryState == null ? void 0 : currentHistoryState.paginationInfo) === void 0 || currentHistoryState.paginationInfo[hash2] === void 0; const newPaginationInfo = { ...currentHistoryState.paginationInfo, [hash2]: paginationInfo }; replaceHistoryState({ ...currentHistoryState, paginationInfo: newPaginationInfo }, void 0, isInitialLoad); } catch { } } function useNativeLoadingSpinner() { const navigationPromise = useRef3(Promise.resolve()); const navigationController = useRef3(); const navigateListener = useCallback3((navigateEvent) => { if (navigateEvent.navigationType === "traverse" || !navigateEvent.canIntercept) return; const controller = navigationController.current; controller == null ? void 0 : controller.signal.addEventListener("abort", () => { controller.abort("user aborted"); }); navigateEvent.intercept({ handler: () => navigationPromise.current }); }, []); return useCallback3( (promise, updateURL, controller) => { if (!supportsNavigationAPI) { void updateURL(); return; } navigationPromise.current = promise; navigationController.current = controller; window.navigation.addEventListener("navigate", navigateListener); void updateURL(true); void promise.finally(() => { window.navigation.removeEventListener("navigate", navigateListener); }); }, [navigateListener] ); } // ../../library/src/modules/useTracking.ts import { useCallback as useCallback4, useContext as useContext2 } from "react"; // ../../library/src/utils/slugify.ts var nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu; var trimSlugRegExp = /^-+|-+$/gu; function slugify(value) { return value.toLowerCase().replace(nonSlugCharactersRegExp, "-").replace(trimSlugRegExp, ""); } // ../../library/src/modules/NodeIdContext.tsx import React7 from "react"; var NodeIdContext = /* @__PURE__ */ React7.createContext(null); // ../../library/src/modules/useTracking.ts function useTracking() { const router = useRouter(); const nodeId = useContext2(NodeIdContext); return useCallback4( (trackingId) => { var _a; if (!((_a = router.pageviewEventData) == null ? void 0 : _a.current)) return; if (slugify(trackingId) !== trackingId) { throw new Error(`Invalid tracking ID: ${trackingId}`); } if (router.pageviewEventData.current instanceof Promise) { void router.pageviewEventData.current.then( (eventData) => sendCustomTrackingEvent(eventData, nodeId, trackingId) ); } else { sendCustomTrackingEvent(router.pageviewEventData.current, nodeId, trackingId); } }, [router, nodeId] ); } function sendCustomTrackingEvent(eventData, nodeId, trackingId) { sendTrackingEvent( "published_site_custom_event", { ...eventData, nodeId, // Don't attach a tracking ID if it's empty trackingId: trackingId || null }, "eager" ); } // ../../library/src/router/useRouteAnchor.ts import React8 from "react"; function useRouteAnchor(routeId, { elementId, hash: linkHash } = {}) { const { navigate, currentPathVariables, preserveQueryParams, siteCanonicalURL } = useRouter(); const route = useRoute(routeId); const currentRouteId = useCurrentRouteId(); const currentRoute = useRoute(currentRouteId ?? ""); useRoutePreloader([routeId], true); const hash2 = linkHash ?? elementId; const href = React8.useMemo( () => getPathForRoute(route, { currentRoutePath: currentRoute == null ? void 0 : currentRoute.path, currentPathVariables, hash: hash2, preserveQueryParams, siteCanonicalURL }), [currentRoute, currentPathVariables, hash2, preserveQueryParams, route, siteCanonicalURL] ); const navigateToRoute = React8.useCallback(() => navigate == null ? void 0 : navigate(routeId, hash2), [hash2, navigate, routeId]); const onClick = React8.useCallback( (event) => { event.preventDefault(); navigateToRoute(); }, [navigateToRoute] ); return { onClick, href }; } // ../../library/src/router/useLocale.ts import React9 from "react"; // ../../library/src/router/getLocalesForCurrentRoute.ts async function getLocalesForCurrentRoute(activeLocale, locales, currentRoute, pathVariables, collectionUtils) { if (!currentRoute) return locales; const slugByLocaleIfCollectionPage = await getSlugByLocaleIfCollectionPage( activeLocale, locales, currentRoute, pathVariables, collectionUtils ); const includedLocalesForCurrentRoute = currentRoute.includedLocales; const localesForCurrentRoute = []; for (const locale of locales) { if (includedLocalesForCurrentRoute) { if (!includedLocalesForCurrentRoute.includes(locale.id)) continue; } if (slugByLocaleIfCollectionPage) { const hasSlug = slugByLocaleIfCollectionPage.has(locale.id); if (!hasSlug) continue; } localesForCurrentRoute.push(locale); } return localesForCurrentRoute; } async function getSlugByLocaleIfCollectionPage(activeLocale, locales, currentRoute, pathVariables, collectionUtils) { var _a; const { collectionId } = currentRoute; if (!collectionId) return null; if (!activeLocale) return null; if (!pathVariables) return null; const { path } = currentRoute; if (!path) return null; const matches = Array.from(path.matchAll(pathVariablesRegExp)); const lastMatch = matches.pop(); if (!lastMatch) return null; const pathVariableWithDelimiter = lastMatch == null ? void 0 : lastMatch[0]; const pathVariableValue = lastMatch == null ? void 0 : lastMatch[1]; if (!pathVariableWithDelimiter || !pathVariableValue) { throw new Error("Failed to replace path variables: unexpected regex match group"); } const currentSlug = pathVariables[pathVariableValue]; if (!currentSlug || !isString(currentSlug)) { throw new Error(`No slug found for path variable ${pathVariableValue}`); } const utils = await ((_a = collectionUtils == null ? void 0 : collectionUtils[collectionId]) == null ? void 0 : _a.call(collectionUtils)); if (!utils) return null; const recordId = await utils.getRecordIdBySlug(currentSlug, activeLocale); if (!recordId) return null; const slugById = /* @__PURE__ */ new Map(); await Promise.all( locales.map(async (locale) => { const slug = await utils.getSlugByRecordId(recordId, locale); if (!slug) return; slugById.set(locale.id, slug); }) ); return slugById; } // ../../library/src/router/useLocale.ts var noopAsync = async () => { }; var defaultLocaleInfo = { activeLocale: null, locales: [], setLocale: noopAsync }; var LocaleInfoContext = /* @__PURE__ */ React9.createContext(defaultLocaleInfo); function useLocaleInfo() { return React9.useContext(LocaleInfoContext); } function useLocalesForCurrentRoute() { const { currentRouteId, routes, collectionUtils, currentPathVariables } = useRouter(); const { activeLocale, locales } = useLocaleInfo(); const [localesForCurrentRoute, setLocalesForCurrentRoute] = React9.useState( () => activeLocale ? [activeLocale] : [] ); const currentRoute = currentRouteId ? routes == null ? void 0 : routes[currentRouteId] : void 0; React9.useEffect(() => { let active = true; getLocalesForCurrentRoute(activeLocale, locales, currentRoute, currentPathVariables, collectionUtils).then((localesSubset) => { if (!active) return; React9.startTransition(() => { if (localesSubset) { setLocalesForCurrentRoute(localesSubset); } else { setLocalesForCurrentRoute(activeLocale ? [activeLocale] : []); } }); }).catch(() => { }); return () => { active = false; }; }, [activeLocale, locales, collectionUtils, currentRoute, currentPathVariables]); return localesForCurrentRoute; } function useLocalizationInfo() { const { activeLocale, locales, setLocale } = useLocaleInfo(); return { activeLocalization: activeLocale, localizations: locales, setLocalization: setLocale }; } function useLocaleCode() { var _a; return ((_a = useLocaleInfo().activeLocale) == null ? void 0 : _a.code) ?? "en-US"; } function useLocale() { return useLocaleCode(); } // ../../library/src/router/hydration/reactHydrationINPOptimizer.ts import { useEffect as useEffect5 } from "react"; var eventsToStop = [ "mousedown", "mouseup", "touchcancel", "touchend", "touchstart", "auxclick", "dblclick", "pointercancel", "pointerdown", "pointerup", "dragend", "dragstart", "drop", "compositionend", "compositionstart", "keydown", "keypress", "keyup", "input", "textInput", // Intentionally camelCase "copy", "cut", "paste", "click", "change", "contextmenu", "reset" ]; var stopFn = (event) => { var _a, _b; if (!((_b = (_a = event.target) == null ? void 0 : _a.closest) == null ? void 0 : _b.call(_a, "#main"))) return; event.stopPropagation(); performance.mark("framer-react-event-handling-prevented"); }; var shouldTurnOnEventHandling = false; function turnOffReactEventHandling() { if (!eventsToStop) return; shouldTurnOnEventHandling = true; performance.mark("framer-react-event-handling-start"); const options = { capture: true }; const body = document.body; eventsToStop.forEach((event) => body.addEventListener(event, stopFn, options)); } function TurnOnReactEventHandling() { useEffect5(() => { if (!shouldTurnOnEventHandling || !eventsToStop) return; const options = { capture: true }; const body = document.body; eventsToStop.forEach((event) => body.removeEventListener(event, stopFn, options)); eventsToStop = void 0; performance.mark("framer-react-event-handling-end"); }, []); return null; } // ../../library/src/router/hydration/hydrationTimings.ts import { useEffect as useEffect6, useInsertionEffect, useLayoutEffect as useLayoutEffect3 } from "react"; // ../../library/src/router/hydration/onlyRunOnce.ts function onlyRunOnce(originalMethod) { let hasRun = false; return function(...args) { if (hasRun) return; hasRun = true; return originalMethod.apply(this, args); }; } // ../../library/src/router/hydration/hydrationTimings.ts function measureSafe(name, start, end) { try { performance.measure(name, start, end); } catch (e) { console.warn(`Could not measure ${name}`, e); } } var _measureUnattributedHydrationOverhead_dec, _measureMutationEffects_dec, _markLayoutStylePaintEnd_dec, _markRafEnd_dec, _markRafStart_dec, _markUseEffectsEnd_dec, _markUseEffectsAreSynchronous_dec, _markUseEffectsRouterStart_dec, _markUseEffectsStart_dec, _markUseLayoutEffectsEnd_dec, _markRouterUseLayoutEffectStart_dec, _markUseLayoutEffectsStart_dec, _markUseInsertionEffectsEnd_dec, _markUseInsertionEffectRouterStart_dec, _markUseInsertionEffectsStart_dec, _markRenderEnd_dec, _markRenderStart_dec, _init; _markRenderStart_dec = [onlyRunOnce], _markRenderEnd_dec = [onlyRunOnce], _markUseInsertionEffectsStart_dec = [onlyRunOnce], _markUseInsertionEffectRouterStart_dec = [onlyRunOnce], _markUseInsertionEffectsEnd_dec = [onlyRunOnce], _markUseLayoutEffectsStart_dec = [onlyRunOnce], _markRouterUseLayoutEffectStart_dec = [onlyRunOnce], _markUseLayoutEffectsEnd_dec = [onlyRunOnce], _markUseEffectsStart_dec = [onlyRunOnce], _markUseEffectsRouterStart_dec = [onlyRunOnce], _markUseEffectsAreSynchronous_dec = [onlyRunOnce], _markUseEffectsEnd_dec = [onlyRunOnce], _markRafStart_dec = [onlyRunOnce], _markRafEnd_dec = [onlyRunOnce], _markLayoutStylePaintEnd_dec = [onlyRunOnce], _measureMutationEffects_dec = [onlyRunOnce], _measureUnattributedHydrationOverhead_dec = [onlyRunOnce]; var HydrationMarker = class { constructor() { __runInitializers(_init, 5, this); __publicField(this, "render", { markStart: () => this.markRenderStart(), markEnd: () => this.markRenderEnd() }); __publicField(this, "mutationEffects", { measure: () => this.measureMutationEffects() }); __publicField(this, "useInsertionEffects", { markStart: () => this.markUseInsertionEffectsStart(), markRouterStart: () => this.markUseInsertionEffectRouterStart(), markEnd: () => this.markUseInsertionEffectsEnd() }); __publicField(this, "useLayoutEffects", { markStart: () => this.markUseLayoutEffectsStart(), markRouterStart: () => this.markRouterUseLayoutEffectStart(), markEnd: () => this.markUseLayoutEffectsEnd() }); __publicField(this, "useEffects", { markStart: () => this.markUseEffectsStart(), markRouterStart: () => this.markUseEffectsRouterStart(), markEnd: () => this.markUseEffectsEnd(), markAreSynchronous: () => this.markUseEffectsAreSynchronous() }); __publicField(this, "browserRendering", { hasStarted: false, requestAnimationFrame: { markStart: () => this.markRafStart(), markEnd: () => this.markRafEnd() }, layoutStylePaint: { markEnd: () => this.markLayoutStylePaintEnd() } }); __publicField(this, "unattributedHydrationOverhead", { measure: () => this.measureUnattributedHydrationOverhead() }); } markRenderStart() { performance.mark("framer-hydration-start" /* Hydration_Start */); } markRenderEnd() { performance.mark("framer-hydration-render-end" /* ReactRender_End */); measureSafe("framer-hydration-render" /* ReactRender */, "framer-hydration-start" /* Hydration_Start */, "framer-hydration-render-end" /* ReactRender_End */); } markUseInsertionEffectsStart() { performance.mark("framer-hydration-insertion-effects-start" /* UseInsertionEffects_Start */); } markUseInsertionEffectRouterStart() { performance.mark("framer-hydration-router-insertion-effect" /* UseInsertionEffect_RouterStart */); } markUseInsertionEffectsEnd() { performance.mark("framer-hydration-insertion-effects-end" /* UseInsertionEffects_End */); measureSafe( "framer-hydration-insertion-effects" /* UseInsertionEffects */, "framer-hydration-insertion-effects-start" /* UseInsertionEffects_Start */, "framer-hydration-insertion-effects-end" /* UseInsertionEffects_End */ ); } markUseLayoutEffectsStart() { performance.mark("framer-hydration-layout-effects-start" /* UseLayoutEffects_Start */); } markRouterUseLayoutEffectStart() { performance.mark("framer-hydration-router-layout-effect" /* UseLayoutEffect_RouterStart */); } markUseLayoutEffectsEnd() { performance.mark("framer-hydration-layout-effects-end" /* UseLayoutEffects_End */); measureSafe("framer-hydration-layout-effects" /* UseLayoutEffects */, "framer-hydration-layout-effects-start" /* UseLayoutEffects_Start */, "framer-hydration-layout-effects-end" /* UseLayoutEffects_End */); } markUseEffectsStart() { performance.mark("framer-hydration-effects-start" /* UseEffects_Start */); } markUseEffectsRouterStart() { performance.mark("framer-hydration-router-effect" /* UseEffects_RouterStart */); } markUseEffectsAreSynchronous() { performance.mark("framer-hydration-effects-sync" /* UseEffectsAreSynchronous */); } markUseEffectsEnd() { var _a, _b; performance.mark("framer-hydration-effects-end" /* UseEffects_End */); measureSafe( "framer-hydration-effects" /* UseEffects */, ((_a = performance.getEntriesByName("framer-hydration-first-paint" /* BrowserRender_LayoutStylePaintEnd */)[0]) == null ? void 0 : _a.name) ?? ((_b = performance.getEntriesByName("framer-hydration-effects-start" /* UseEffects_Start */)[0]) == null ? void 0 : _b.name), "framer-hydration-effects-end" /* UseEffects_End */ ); } markRafStart() { this.browserRendering.hasStarted = true; performance.mark("framer-hydration-browser-render-start" /* BrowserRender_RafStart */); } markRafEnd() { performance.mark("framer-hydration-browser-raf-end" /* BrowserRender_RafEnd */); measureSafe( "framer-hydration-raf" /* BrowserRender_RafDuration */, "framer-hydration-browser-render-start" /* BrowserRender_RafStart */, "framer-hydration-browser-raf-end" /* BrowserRender_RafEnd */ ); } markLayoutStylePaintEnd() { performance.mark("framer-hydration-first-paint" /* BrowserRender_LayoutStylePaintEnd */); measureSafe("framer-hydration-time-to-first-paint" /* TimeToFirstPaint */, "framer-hydration-start" /* Hydration_Start */, "framer-hydration-first-paint" /* BrowserRender_LayoutStylePaintEnd */); measureSafe( "framer-hydration-browser-render" /* BrowserRender_LayoutStylePaintDuration */, "framer-hydration-browser-raf-end" /* BrowserRender_RafEnd */, "framer-hydration-first-paint" /* BrowserRender_LayoutStylePaintEnd */ ); } measureMutationEffects() { measureSafe("framer-hydration-commit" /* MutationEffects */, "framer-hydration-layout-effects-end" /* UseLayoutEffects_End */, "framer-hydration-effects-start" /* UseEffects_Start */); } measureUnattributedHydrationOverhead() { var _a, _b; measureSafe( "framer-hydration-uho" /* UnattributedHydrationOverhead */, // If effects have run before the start of the render pipeline, we measure from the effects end. // If not, the paint will happen before effects run, so we measure from the layout effects end. ((_a = performance.getEntriesByName("framer-hydration-effects-end" /* UseEffects_End */)[0]) == null ? void 0 : _a.name) ?? ((_b = performance.getEntriesByName("framer-hydration-layout-effects-end" /* UseLayoutEffects_End */)[0]) == null ? void 0 : _b.name), "framer-hydration-browser-render-start" /* BrowserRender_RafStart */ ); } }; _init = __decoratorStart(null); __decorateElement(_init, 1, "markRenderStart", _markRenderStart_dec, HydrationMarker); __decorateElement(_init, 1, "markRenderEnd", _markRenderEnd_dec, HydrationMarker); __decorateElement(_init, 1, "markUseInsertionEffectsStart", _markUseInsertionEffectsStart_dec, HydrationMarker); __decorateElement(_init, 1, "markUseInsertionEffectRouterStart", _markUseInsertionEffectRouterStart_dec, HydrationMarker); __decorateElement(_init, 1, "markUseInsertionEffectsEnd", _markUseInsertionEffectsEnd_dec, HydrationMarker); __decorateElement(_init, 1, "markUseLayoutEffectsStart", _markUseLayoutEffectsStart_dec, HydrationMarker); __decorateElement(_init, 1, "markRouterUseLayoutEffectStart", _markRouterUseLayoutEffectStart_dec, HydrationMarker); __decorateElement(_init, 1, "markUseLayoutEffectsEnd", _markUseLayoutEffectsEnd_dec, HydrationMarker); __decorateElement(_init, 1, "markUseEffectsStart", _markUseEffectsStart_dec, HydrationMarker); __decorateElement(_init, 1, "markUseEffectsRouterStart", _markUseEffectsRouterStart_dec, HydrationMarker); __decorateElement(_init, 1, "markUseEffectsAreSynchronous", _markUseEffectsAreSynchronous_dec, HydrationMarker); __decorateElement(_init, 1, "markUseEffectsEnd", _markUseEffectsEnd_dec, HydrationMarker); __decorateElement(_init, 1, "markRafStart", _markRafStart_dec, HydrationMarker); __decorateElement(_init, 1, "markRafEnd", _markRafEnd_dec, HydrationMarker); __decorateElement(_init, 1, "markLayoutStylePaintEnd", _markLayoutStylePaintEnd_dec, HydrationMarker); __decorateElement(_init, 1, "measureMutationEffects", _measureMutationEffects_dec, HydrationMarker); __decorateElement(_init, 1, "measureUnattributedHydrationOverhead", _measureUnattributedHydrationOverhead_dec, HydrationMarker); __decoratorMetadata(_init, HydrationMarker); var hydrationMarker; function markHydrationStart() { hydrationMarker = new HydrationMarker(); hydrationMarker.render.markStart(); } function useMarkRouterEffects() { useInsertionEffect(() => { hydrationMarker == null ? void 0 : hydrationMarker.useInsertionEffects.markRouterStart(); }, []); useLayoutEffect3(() => { hydrationMarker == null ? void 0 : hydrationMarker.useLayoutEffects.markRouterStart(); }, []); useEffect6(() => { hydrationMarker == null ? void 0 : hydrationMarker.useEffects.markRouterStart(); }, []); } var wasInBackground = false; function useMarkSuspenseEffectsStart() { useInsertionEffect(() => { hydrationMarker == null ? void 0 : hydrationMarker.render.markEnd(); hydrationMarker == null ? void 0 : hydrationMarker.useInsertionEffects.markStart(); }, []); useLayoutEffect3(() => { hydrationMarker == null ? void 0 : hydrationMarker.useLayoutEffects.markStart(); if (document.visibilityState !== "visible") { wasInBackground = true; return; } frame.read(() => { hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markStart(); hydrationMarker == null ? void 0 : hydrationMarker.unattributedHydrationOverhead.measure(); }); }, []); useEffect6(() => { hydrationMarker == null ? void 0 : hydrationMarker.useEffects.markStart(); if (!(hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.hasStarted)) { hydrationMarker == null ? void 0 : hydrationMarker.mutationEffects.measure(); hydrationMarker == null ? void 0 : hydrationMarker.useEffects.markAreSynchronous(); } }, []); } function useMarkSuspenseEffectEnd() { useInsertionEffect(() => { hydrationMarker == null ? void 0 : hydrationMarker.useInsertionEffects.markEnd(); }, []); useLayoutEffect3(() => { hydrationMarker == null ? void 0 : hydrationMarker.useLayoutEffects.markEnd(); if (wasInBackground || document.visibilityState !== "visible") return; frame.read(() => { hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markEnd(); void yieldToMain().then(() => { hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.layoutStylePaint.markEnd(); }); }); }, []); useEffect6(() => { hydrationMarker == null ? void 0 : hydrationMarker.useEffects.markEnd(); }, []); } function MarkSuspenseEffectsStart() { useMarkSuspenseEffectsStart(); return null; } function MarkSuspenseEffectsEnd() { useMarkSuspenseEffectEnd(); return null; } var MarkSuspenseEffects = { Start: MarkSuspenseEffectsStart, End: MarkSuspenseEffectsEnd }; // ../../library/src/router/error-boundary/NotFoundErrorBoundary.tsx import { Component } from "react"; // ../../library/src/router/renderPage.tsx import React10 from "react"; import { jsx as jsx5 } from "react/jsx-runtime"; function renderPage(Page4, defaultPageStyle) { const props = { style: defaultPageStyle, "data-framer-root": "" }; return React10.isValidElement(Page4) ? React10.cloneElement(Page4, props) : /* @__PURE__ */ jsx5(Page4, { ...props }); } // ../../library/src/router/error-boundary/NotFoundErrorBoundary.tsx var NotFoundError = class extends Error { }; var NotFoundErrorBoundary = class extends Component { constructor(props) { super(props); this.state = { error: void 0, forceUpdateKey: props.forceUpdateKey }; } static getDerivedStateFromError(error) { return { error }; } /** Resets the error when forceUpdateKey gets bumped. */ static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.forceUpdateKey !== prevState.forceUpdateKey) { const newState = { forceUpdateKey: nextProps.forceUpdateKey }; if (prevState.error) { newState.error = void 0; } return newState; } return null; } render() { if (this.state.error === void 0) { return this.props.children; } if (!(this.state.error instanceof NotFoundError)) { throw this.state.error; } const { notFoundPage, defaultPageStyle } = this.props; if (!notFoundPage) { throw this.state.error; } return renderPage(notFoundPage, defaultPageStyle); } }; // ../../library/src/router/inferInitialRouteFromPath.ts var memoPathRoutes; var memoPaths; var lastRoutes; function getRouteInfoMemo(routes) { if (lastRoutes !== routes) { memoPathRoutes = {}; for (const [routeId, { path }] of Object.entries(routes)) { if (path) memoPathRoutes[path] = { path, depth: pathDepth(path), routeId }; } memoPaths = Object.values(memoPathRoutes); memoPaths.sort(({ depth: depth1 }, { depth: depth2 }) => depth2 - depth1); lastRoutes = routes; } return [memoPathRoutes, memoPaths]; } function inferInitialRouteFromPath(routes, decodedLocationPath, fallback = true, locales = []) { const [pathRoutes, paths] = getRouteInfoMemo(routes); let activeLocale; let localeId; let locationPath = decodedLocationPath; if (locales.length > 0) { const firstPathSegment = locationPath.split("/").find(Boolean); if (firstPathSegment) { activeLocale = locales.find(({ slug }) => slug === firstPathSegment); if (activeLocale) { localeId = activeLocale.id; locationPath = locationPath.substring(activeLocale.slug.length + 1); } } if (!localeId) { const defaultLocale = locales.find(({ slug }) => slug === ""); if (defaultLocale) { localeId = defaultLocale.id; } } } const exactMatch = pathRoutes[locationPath]; if (exactMatch) { const match = matchPath(locationPath, exactMatch.path); if (match.isMatch) return { routeId: exactMatch.routeId, localeId, pathVariables: match.pathVariables }; } for (const { path, routeId } of paths) { const match = matchPath(locationPath, path); if (match.isMatch) return { routeId, localeId, pathVariables: match.pathVariables }; } if (!fallback) throw new Error("No exact match found for path"); const rootPath = pathRoutes["/"]; if (rootPath) return { routeId: rootPath.routeId, localeId }; const firstRoute = Object.keys(routes)[0]; if (!firstRoute) throw new Error("Router should not have undefined routes"); return { routeId: firstRoute, localeId }; } function pathDepth(path) { const pathWithTrimmedSlashes = path.replace(/^\/|\/$/gu, ""); if (pathWithTrimmedSlashes === "") return 0; return pathWithTrimmedSlashes.split("/").length; } function matchPath(path, routePath) { const pathVariablesKeys = []; const safeRoutePath = escapeStringRegExp(routePath); const routePathRegExpString = safeRoutePath.replace(pathVariablesRegExp, (_, name) => { pathVariablesKeys.push(name); return "([^/]+)"; }); const routePathRegExp = new RegExp(routePathRegExpString + "$"); const matches = path.match(routePathRegExp); if (!matches) return { isMatch: false }; if (matches.length === 1) return { isMatch: true }; const pathVariables = {}; const pathVariablesValues = matches.slice(1); for (let i = 0; i < pathVariablesKeys.length; ++i) { const key7=p athVariablesKeys[i]; if (key7===v oid 0) continue; const value=p athVariablesValues[i]; const existingValue=p athVariables[key7]; if (existingValue) { if (existingValue !==v alue) { return { isMatch: false }; } else { continue; } } if (value===v oid 0) { throw new Error( "Path variable values cannot be undefined" ); } pathVariables[key7]=v alue; } return { isMatch: true, pathVariables }; } function escapeStringRegExp(string) { return string.replace(/[|\\{}()[\]^$+*?.]/gu, "\\$&" ).replace(/-/gu, "\\x2d" ); } // ../../library/src/router/routeVariants.ts function getVariantsFromServerTiming() { var _a; if ( "PerformanceServerTiming" in window) { const serverTiming=( _a=p erformance.getEntriesByType( "navigation" )[0])==n ull ? void 0 : _a.serverTiming; if (!serverTiming || serverTiming.length===0 ) return new URLSearchParams(); const entry=s erverTiming.find((it)=> it.name === "abtests"); if (!entry) return new URLSearchParams(); return new URLSearchParams(entry.description); } return new URLSearchParams(); } function patchRoute(routes, abTestId, abTestingVariantId) { const route = routes[abTestingVariantId]; if (!route) return; const routeId = route.abTestingParentId ?? abTestingVariantId; if (!routes[routeId]) return; const { abTestingParentId, ...patchingRoute } = route; const elements = routes[routeId].elements || route.elements ? { ...routes[routeId].elements, ...route.elements } : void 0; routes[routeId] = { ...patchingRoute, elements, abTestingVariantId, abTestId }; } function patchRoutesFromSearchParams(routes, variants) { for (const [abTestId, abTestingVariantId] of variants) { patchRoute(routes, abTestId, abTestingVariantId); } } function removeRoutesVariants(routes) { var _a; for (const routeId in routes) { if ((_a = routes[routeId]) == null ? void 0 : _a.abTestingParentId) { delete routes[routeId]; } } } function patchInitialRoute(routes, routeId) { var _a, _b; if (!routes[routeId]) return; if (!routes[routeId].abTestingParentId) return; const parentId = routes[routeId].abTestingParentId; const { abTestingParentId, ...route } = routes[routeId]; const elements = ((_a = routes[parentId]) == null ? void 0 : _a.elements) || route.elements ? { ...(_b = routes[parentId]) == null ? void 0 : _b.elements, ...route.elements } : void 0; routes[parentId] = { ...route, elements, abTestingVariantId: routeId }; } function patchRoutesForABTesting(routes, initialRouteId) { var _a; if (typeof window === "undefined") return initialRouteId; let resolvedInitialRouteId = initialRouteId; if (initialRouteId) { patchInitialRoute(routes, initialRouteId); const parentRouteId = (_a = routes[initialRouteId]) == null ? void 0 : _a.abTestingParentId; if (parentRouteId) { resolvedInitialRouteId = parentRouteId; } } patchRoutesFromSearchParams(routes, getVariantsFromServerTiming()); removeRoutesVariants(routes); return resolvedInitialRouteId; } // ../../shared/src/ssg/constants.ts var mainTagId = "main"; var generatedPageDatasetKey = "framerGeneratedPage"; var searchIndexMetaName = "framer-search-index"; var searchIndexMetaSelector = `meta[name="${searchIndexMetaName}"]`; var endOfHeadStartMarker = " "; var endOfHeadEndMarker = " "; var endOfBodyStartMarker = " "; var endOfBodyEndMarker = " "; // ../../library/src/router/useMetadata.ts import * as React11 from "react"; // ../../library/src/utils/assert.ts function assert(condition, ...msg) { var _a, _b; if (condition) return; const e = Error("Assertion Error" + (msg.length > 0 ? ": " + msg.join(" ") : "")); if (e.stack) { try { const lines = e.stack.split("\n"); if ((_a = lines[1]) == null ? void 0 : _a.includes("assert")) { lines.splice(1, 1); e.stack = lines.join("\n"); } else if ((_b = lines[0]) == null ? void 0 : _b.includes("assert")) { lines.splice(0, 1); e.stack = lines.join("\n"); } } catch { } } throw e; } function assertNever(x, error) { throw error || new Error(x ? `Unexpected value: ${x}` : "Application entered invalid state"); } // ../../library/src/utils/insertHTML.ts async function insertHTML(html, referenceNode, position = "beforeend") { let insertionParent, insertionPoint; switch (position) { case "beforebegin": assert(referenceNode.parentNode, "Can't use 'beforebegin' with a referenceNode at the top level"); insertionParent = referenceNode.parentNode; insertionPoint = referenceNode; break; case "afterend": assert(referenceNode.parentNode, "Can't use 'afterend' with a referenceNode at the top level"); insertionParent = referenceNode.parentNode; insertionPoint = referenceNode.nextSibling; break; case "afterbegin": insertionParent = referenceNode; insertionPoint = referenceNode.firstChild; break; case "beforeend": insertionParent = referenceNode; insertionPoint = null; break; default: assertNever(position); } const range = document.createRange(); range.selectNodeContents(insertionParent); const fragment = range.createContextualFragment(html); await pump(fragment, insertionParent, insertionPoint); } async function pump(sourceNode, targetParent, beforeNode) { for (let node = sourceNode.firstChild; node; node = node.nextSibling) { if (node instanceof HTMLScriptElement) { const needsWait = handleScript(node, targetParent, beforeNode); if (needsWait !== void 0) { await needsWait; } continue; } const clone = node.cloneNode(false); targetParent.insertBefore(clone, beforeNode); if (node.firstChild) { await pump(node, clone, null); } } } function handleScript(node, parent, beforeNode) { var _a; const script = node.cloneNode(true); if (!node.hasAttribute("src") || // external node.hasAttribute("async") || // async node.hasAttribute("defer") || // defer ((_a = node.getAttribute("type")) == null ? void 0 : _a.toLowerCase()) === "module") { parent.insertBefore(script, beforeNode); } else { return execExternalBlockingScript(script, parent, beforeNode); } } function execExternalBlockingScript(script, parent, beforeNode) { return new Promise((resolve) => { script.onload = script.onerror = resolve; parent.insertBefore(script, beforeNode); }); } // ../../library/src/router/useMetadata.ts function useMetadata(metadata) { const { isInitialNavigation } = useRouter(); React11.useEffect(() => { if (metadata.robots) { let robotsTag = document.querySelector('meta[name="robots"]'); if (robotsTag) { robotsTag.setAttribute("content", metadata.robots); } else { robotsTag = document.createElement("meta"); robotsTag.setAttribute("name", "robots"); robotsTag.setAttribute("content", metadata.robots); document.head.appendChild(robotsTag); } } }, [metadata.robots]); React11.useInsertionEffect(() => { var _a; document.title = metadata.title || ""; if (metadata.viewport) { (_a = document.querySelector('meta[name="viewport"]')) == null ? void 0 : _a.setAttribute("content", metadata.viewport); } }, [metadata.title, metadata.viewport]); React11.useEffect(() => { if (!isInitialNavigation) return; const mainTag = document.getElementById(mainTagId); const isGeneratedPage = mainTag && mainTag.dataset[generatedPageDatasetKey] !== void 0; if (isGeneratedPage) return; void insertCustomHTML( metadata.customHTMLHeadStart, metadata.customHTMLHeadEnd, metadata.customHTMLBodyStart, metadata.customHTMLBodyEnd ); }, []); } async function insertCustomHTML(customHTMLHeadStart, customHTMLHeadEnd, customHTMLBodyStart, customHTMLBodyEnd) { let endOfHeadStart; let endOfHeadEnd; let endOfBodyStart; let endOfBodyEnd; if (customHTMLHeadStart || customHTMLHeadEnd) { const { start, end } = findCommentMarkers( document.head.childNodes, customHTMLHeadStart ? endOfHeadStartMarker : void 0, customHTMLHeadEnd ? endOfHeadEndMarker : void 0 ); endOfHeadStart = start; endOfHeadEnd = end; } if (customHTMLBodyStart || customHTMLBodyEnd) { const { start, end } = findCommentMarkers( document.body.childNodes, customHTMLBodyStart ? endOfBodyStartMarker : void 0, customHTMLBodyEnd ? endOfBodyEndMarker : void 0 ); endOfBodyStart = start; endOfBodyEnd = end; } if (customHTMLHeadStart && endOfHeadStart) { await insertHTML(customHTMLHeadStart, endOfHeadStart, "beforebegin"); } if (customHTMLHeadEnd && endOfHeadEnd) { await insertHTML(customHTMLHeadEnd, endOfHeadEnd, "beforebegin"); } if (customHTMLBodyStart && endOfBodyStart) { await insertHTML(customHTMLBodyStart, endOfBodyStart, "beforebegin"); } if (customHTMLBodyEnd && endOfBodyEnd) { await insertHTML(customHTMLBodyEnd, endOfBodyEnd, "beforebegin"); } } function findCommentMarkers(nodes, startMarker, endMarker) { if (!startMarker && !endMarker) return { start: void 0, end: void 0 }; let start; let end; let i = 0; let j = nodes.length - 1; while (i <=j ) { const startNode=n odes[i]; const endNode=n odes[j]; if (!start && (startNode==n ull ? void 0 : startNode.nodeType)===N ode.COMMENT_NODE && startMarker && `` === startMarker) { start = startNode; if (!endMarker) break; } if (!end && (endNode == null ? void 0 : endNode.nodeType) === Node.COMMENT_NODE && endMarker && ` ` === endMarker) { end = endNode; if (!startMarker) break; } if (start && end) break; i++; j--; } return { start, end }; } // ../../library/src/utils/warnOnce.ts var warningMessages = /* @__PURE__ */ new Set(); function warnOnce2(keyMessage, ...rest) { if (warningMessages.has(keyMessage)) return; warningMessages.add(keyMessage); console.warn(keyMessage, ...rest); } // ../../library/src/utils/deprecation.ts function deprecationWarning(removedItem, removalVersion, replacement) { const replacementText = replacement ? `, use ${replacement} instead` : ""; const warningText = `Deprecation warning: ${removedItem} will be removed in version ${removalVersion}${replacementText}.`; warnOnce2(warningText); } // ../../library/src/animation/Animatable/Observers.ts var Observers = class { constructor() { __publicField(this, "observers", /* @__PURE__ */ new Set()); __publicField(this, "transactions", {}); } add(observer) { this.observers.add(observer); let isCalled = false; return () => { if (isCalled) { return; } isCalled = true; this.remove(observer); }; } remove(observer) { this.observers.delete(observer); } notify(change, transaction) { if (transaction) { const accumulatedChange = this.transactions[transaction] || change; accumulatedChange.value = change.value; this.transactions[transaction] = accumulatedChange; } else { this.callObservers(change); } } finishTransaction(transaction) { const accumulatedChange = this.transactions[transaction]; delete this.transactions[transaction]; return this.callObservers(accumulatedChange, transaction); } callObservers(change, transaction) { const finishObservers = []; new Set(this.observers).forEach((observer) => { if (typeof observer === "function") { observer(change, transaction); } else { observer.update(change, transaction); finishObservers.push(observer.finish); } }); return finishObservers; } }; // ../../library/src/animation/Animatable/Animatable.ts var Animatable = /* @__PURE__ */ (() => { function Animatable2(value) { deprecationWarning("Animatable()", "2.0.0", "the new animation API (https://www.framer.com/api/animation/)"); return isAnimatable(value) ? value : new AnimatableValue(value); } Animatable2.transaction = (update) => { const transactionId = Math.random(); const updatedValues = /* @__PURE__ */ new Set(); const updater = (animatable, value) => { animatable.set(value, transactionId); updatedValues.add(animatable); }; update(updater, transactionId); const finishObservers = []; updatedValues.forEach((value) => { finishObservers.push(...value.finishTransaction(transactionId)); }); finishObservers.forEach((finish) => { finish(transactionId); }); }; Animatable2.getNumber = (value, defaultValue = 0) => { return Animatable2.get(value, defaultValue); }; Animatable2.get = (value, defaultValue) => { if (value === void 0 || value === null) { return defaultValue; } if (isAnimatable(value)) { return value.get(); } return value; }; Animatable2.objectToValues = (object) => { if (!object) { return object; } const result = {}; for (const key7 in object) { const value = object[key7]; if (isAnimatable(value)) { result[key7] = value.get(); } else { result[key7] = value; } } return result; }; return Animatable2; })(); var onUpdateKey = "onUpdate"; var finishTransactionKey = "finishTransaction"; function isAnimatable(value) { return value !== null && typeof value === "object" && onUpdateKey in value && value[onUpdateKey] instanceof Function && finishTransactionKey in value && value[finishTransactionKey] instanceof Function; } function animatableInterpolation(value, currentInterpolation) { return { interpolate(from, to) { const fromValue = from.get(); const toValue = to.get(); const result = Animatable(fromValue); return (progress2) => { const v = currentInterpolation.interpolate(fromValue, toValue)(progress2); result.set(v); return result; }; }, difference(from, to) { const v = from.get(); return currentInterpolation.difference(v, to.get()); } }; } var AnimatableValue = class { constructor(value) { this.value = value; __publicField(this, "observers", new Observers()); } static interpolationFor(value, currentInterpolation) { if (isAnimatable(value)) { return animatableInterpolation(value, currentInterpolation); } } get() { return this.value; } set(value, transaction) { const oldValue = this.value; if (isAnimatable(value)) { value = value.get(); } this.value = value; const change = { value, oldValue }; this.observers.notify(change, transaction); } finishTransaction(transaction) { return this.observers.finishTransaction(transaction); } onUpdate(handler) { return this.observers.add(handler); } }; // ../../library/src/render/utils/roundedNumber.ts function roundedNumber(value, decimals) { const d = Math.round(Math.abs(decimals)); const multiplier = 10 ** d; return Math.round(value * multiplier) / multiplier; } function roundedNumberString(value, decimals) { const result = value.toFixed(decimals); return decimals === 0 ? result : `${+result}`; } function roundWithOffset(value, offset) { if (offset === 0) { return Math.round(value); } offset -= offset | 0; if (offset < 0) { offset=1 - offset; } return Math.round(value - offset) + offset; } function roundToHalfPixel(value) { return Math.round(value * 2) / 2; } // ../../library/src/render/types/Point.ts function Point(x, y) { return { x, y }; } ((Point2)=> { Point2.isQuadrilateralPoints = (points) => { return (points == null ? void 0 : points.length) === 4; }; Point2.add = (...args) => { return args.reduce( (previousValue, currentValue) => { return { x: previousValue.x + currentValue.x, y: previousValue.y + currentValue.y }; }, { x: 0, y: 0 } ); }; Point2.subtract = (a, b) => { return { x: a.x - b.x, y: a.y - b.y }; }; Point2.multiply = (a, b) => { return { x: a.x * b, y: a.y * b }; }; Point2.divide = (a, b) => { return { x: a.x / b, y: a.y / b }; }; Point2.absolute = (point) => { return { x: Math.abs(point.x), y: Math.abs(point.y) }; }; Point2.reverse = (point) => { return { x: point.x * -1, y: point.y * -1 }; }; Point2.pixelAligned = (point, offset = { x: 0, y: 0 }) => { return { x: roundWithOffset(point.x, offset.x), y: roundWithOffset(point.y, offset.y) }; }; Point2.distance = (a, b) => { const deltaX = Math.abs(a.x - b.x); const deltaY = Math.abs(a.y - b.y); return Math.sqrt(deltaX * deltaX + deltaY * deltaY); }; Point2.angle = (a, b) => { return Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI - 90; }; Point2.angleFromX = (a, b) => { return Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI; }; Point2.isEqual = (a, b) => { return a.x === b.x && a.y === b.y; }; Point2.rotationNormalizer = () => { let lastValue; return (value) => { if (typeof lastValue !== "number") { lastValue = value; } const diff = lastValue - value; const maxDiff = Math.abs(diff) + 180; const nTimes = Math.floor(maxDiff / 360); if (diff < 180) { value -=n Times * 360; } if (diff> 180) { value += nTimes * 360; } lastValue = value; return value; }; }; function center(a, b) { return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }; } Point2.center = center; function centroid(points) { let sumX = 0; let sumY = 0; points.forEach((point) => { sumX += point.x; sumY += point.y; }); const centroidX = sumX / points.length; const centroidY = sumY / points.length; return { x: centroidX, y: centroidY }; } Point2.centroid = centroid; function sortClockwise(points) { const centerPoint = Point2.centroid(points); const angles = /* @__PURE__ */ new Map(); for (let i = 0; i < points.length; i++) { const point=p oints[i]; if (!point) continue; angles.set(point, Math.atan2(point.y - centerPoint.y, point.x - centerPoint.x)); } return points.sort((a, b)=> (angles.get(a) ?? 0) - (angles.get(b) ?? 0)); } Point2.sortClockwise = sortClockwise; })(Point || (Point = {})); // ../../library/src/animation/Animators/BezierAnimator.ts var BezierDefaults = { curve: "ease" /* Ease */, duration: 1 }; function controlPointsForCurve(curve) { switch (curve) { case "linear" /* Linear */: return [0, 0, 1, 1]; case "ease" /* Ease */: return [0.25, 0.1, 0.25, 1]; case "ease-in" /* EaseIn */: return [0.42, 0, 1, 1]; case "ease-out" /* EaseOut */: return [0, 0, 0.58, 1]; case "ease-in-out" /* EaseInOut */: return [0.42, 0, 0.58, 1]; } } var BezierAnimator = class { constructor(options, interpolation) { this.interpolation = interpolation; __publicField(this, "unitBezier"); __publicField(this, "options"); __publicField(this, "current"); __publicField(this, "destination"); __publicField(this, "interpolator"); __publicField(this, "progress", 0); __publicField(this, "next", (delta) => { const { duration } = this.options; this.progress += delta / duration; const value = this.unitBezier.solve(this.progress, this.solveEpsilon(duration)); assert(this.interpolator !== void 0, "setFrom() or setTo() must be called before next()"); this.current = this.interpolator(value); return this.current; }); this.options = { ...BezierDefaults, ...options }; let controlPoints; if (typeof this.options.curve === "string") { controlPoints = controlPointsForCurve(this.options.curve); } else { controlPoints = this.options.curve; } const [p1x, p1y, p2x, p2y] = controlPoints; this.unitBezier = new UnitBezier(Point(p1x, p1y), Point(p2x, p2y)); } setFrom(value) { this.current = value; this.updateInterpolator(); } setTo(value) { this.destination = value; this.updateInterpolator(); } isReady() { return this.interpolator !== void 0; } updateInterpolator() { if (this.current === void 0 || this.destination === void 0) { return; } this.interpolator = this.interpolation.interpolate(this.current, this.destination); } isFinished() { return this.progress >= 1; } solveEpsilon(duration) { return 1 / (200 * duration); } }; var UnitBezier = class { constructor(point1, point2) { __publicField(this, "a"); __publicField(this, "b"); __publicField(this, "c"); this.c = Point.multiply(point1, 3); this.b = Point.subtract(Point.multiply(Point.subtract(point2, point1), 3), this.c); this.a = Point.subtract(Point.subtract(Point(1, 1), this.c), this.b); } solve(x, epsilon2) { return this.sampleY(this.solveForT(x, epsilon2)); } sampleX(t) { return ((this.a.x * t + this.b.x) * t + this.c.x) * t; } sampleY(t) { return ((this.a.y * t + this.b.y) * t + this.c.y) * t; } sampleDerivativeX(t) { return (3 * this.a.x * t + 2 * this.b.x) * t + this.c.x; } solveForT(x, epsilon2) { let t0, t1, t2, x2, d2, i; t2 = x; for (i = 0; i < 8; ++i) { x2=t his.sampleX(t2) - x; if (Math.abs(x2) < epsilon2) return t2; d2=t his.sampleDerivativeX(t2); if (Math.abs(d2) < epsilon2) break; t2=t 2 - x2 / d2; } t0=0 ; t1=1 ; t2=x ; if (t2 < t0) return t0; if (t2> t1) return t1; while (t0 < t1) { x2=t his.sampleX(t2); if (Math.abs(x2 - x) < epsilon2) return t2; if (x> x2) t0 = t2; else t1 = t2; t2 = (t1 - t0) * 0.5 + t0; } return t2; } }; // ../../library/src/animation/Animators/Integrator.ts var Integrator = class { constructor(accelerationFunction) { __publicField(this, "accelerationForState"); this.accelerationForState = accelerationFunction; } integrateState(state, dt) { const a = this.evaluateState(state); const b = this.evaluateStateWithDerivative(state, dt * 0.5, a); const c = this.evaluateStateWithDerivative(state, dt * 0.5, b); const d = this.evaluateStateWithDerivative(state, dt, c); const dxdt = 1 / 6 * (a.dx + 2 * (b.dx + c.dx) + d.dx); const dvdt = 1 / 6 * (a.dv + 2 * (b.dv + c.dv) + d.dv); state.x = state.x + dxdt * dt; state.v = state.v + dvdt * dt; return state; } evaluateState(initialState2) { const dv = this.accelerationForState(initialState2); return { dx: initialState2.v, dv }; } evaluateStateWithDerivative(initialState2, dt, derivative) { const state = { x: initialState2.x + derivative.dx * dt, v: initialState2.v + derivative.dv * dt }; const output = { dx: state.v, dv: this.accelerationForState(state) }; return output; } }; // ../../library/src/animation/Animators/FrictionAnimator.ts var FrictionAnimator = class { constructor(options) { __publicField(this, "options"); __publicField(this, "state"); __publicField(this, "integrator"); this.options = { velocity: 0, friction: 2, tolerance: 1 / 10 }; Object.assign(this.options, options); this.state = { x: 0, v: this.options.velocity }; this.integrator = new Integrator((state) => -(this.options.friction * state.v)); } setFrom(value) { this.state.x = value; } setTo(value) { } setVelocity(velocity) { this.state.v = velocity; } getState() { return this.state; } isReady() { return true; } next(delta) { this.state = this.integrator.integrateState(this.state, delta); return this.state.x; } isFinished() { return Math.abs(this.state.v) < this.options.tolerance; } }; // ../../library/src/interpolation/Interpolation.ts function isInterpolatable(value) { return typeof value==="function" && value.interpolationFor && typeof value.interpolationFor==="function" ; } var Interpolation={ /** * @param from - * @param to - * @internal */ handleUndefined: (from, to)=> { if (from === void 0) { from = to; } if (to === void 0) { to = from; } return [from, to]; } }; // ../../library/src/interpolation/NumberInterpolation.ts var NumberInterpolation = { interpolate(from, to) { ; [from, to] = Interpolation.handleUndefined(from, to); const a1 = from; const b1 = to - a1; return (progress2) => { const value = a1 + b1 * progress2; return value; }; }, difference(from, to) { return to - from; } }; // ../../library/src/animation/Animators/SpringCurveValueConverter.ts var epsilon = 1e-3; var minDuration = 0.01; var maxDuration2 = 10; var minDamping = /* @__PURE__ */ (() => Number.MIN_VALUE)(); var maxDamping = 1; function approximateRoot(func, derivative, initialGuess, times = 12) { let result = initialGuess; for (let i = 1, end = times, asc = 1 <=e nd; asc ? i < end : i> end; asc ? i++ : i--) { result = result - func(result) / derivative(result); } return result; } function angularFrequency(undampedFrequency, dampingRatio) { return undampedFrequency * Math.sqrt(1 - Math.pow(dampingRatio, 2)); } var SpringCurveValueConverter = { computeDampingRatio: (tension, friction, mass = 1) => { return friction / (2 * Math.sqrt(mass * tension)); }, // Tries to compute the duration of a spring, // but can't for certain velocities and if dampingRatio >= 1 // In those cases it will return null computeDuration: (tension, friction, velocity = 0, mass = 1) => { let duration; const dampingRatio = SpringCurveValueConverter.computeDampingRatio(tension, friction); const undampedFrequency = Math.sqrt(tension / mass); if (dampingRatio < 1) { const a=M ath.sqrt(1 - Math.pow(dampingRatio, 2)); const b=v elocity / (a * undampedFrequency); const c=d ampingRatio / a; const d=- ((b - c) / epsilon); if (d <=0 ) { return null; } duration=M ath.log(d) / (dampingRatio * undampedFrequency); } else { return null; } return duration; }, computeDerivedCurveOptions: (dampingRatio, duration, velocity=0 , mass=1 )=> { let derivative, envelope; dampingRatio = Math.max(Math.min(dampingRatio, maxDamping), minDamping); duration = Math.max(Math.min(duration, maxDuration2), minDuration); if (dampingRatio < 1) { envelope=f unction(envelopeUndampedFrequency) { const exponentialDecay=e nvelopeUndampedFrequency * dampingRatio; const currentDisplacement=e xponentialDecay * duration; const a=e xponentialDecay - velocity; const b=a ngularFrequency(envelopeUndampedFrequency, dampingRatio); const c=M ath.exp(-currentDisplacement); return epsilon - a / b * c; }; derivative=f unction(derivativeUndampedFrequency) { const exponentialDecay=d erivativeUndampedFrequency * dampingRatio; const currentDisplacement=e xponentialDecay * duration; const d=c urrentDisplacement * velocity + velocity; const e=M ath.pow(dampingRatio, 2) * Math.pow(derivativeUndampedFrequency, 2) * duration; const f=M ath.exp(-currentDisplacement); const g=a ngularFrequency(Math.pow(derivativeUndampedFrequency, 2), dampingRatio); const factor=- envelope(derivativeUndampedFrequency) + epsilon> 0 ? -1 : 1; return factor * ((d - e) * f) / g; }; } else { envelope = function(envelopeUndampedFrequency) { const a = Math.exp(-envelopeUndampedFrequency * duration); const b = (envelopeUndampedFrequency - velocity) * duration + 1; return -epsilon + a * b; }; derivative = function(derivativeUndampedFrequency) { const a = Math.exp(-derivativeUndampedFrequency * duration); const b = (velocity - derivativeUndampedFrequency) * Math.pow(duration, 2); return a * b; }; } const result = { tension: 100, friction: 10, velocity }; const initialGuess = 5 / duration; const undampedFrequency = approximateRoot(envelope, derivative, initialGuess); if (!Number.isNaN(undampedFrequency)) { result.tension = Math.pow(undampedFrequency, 2) * mass; result.friction = dampingRatio * 2 * Math.sqrt(mass * result.tension); } return result; } }; // ../../library/src/animation/Animators/SpringAnimator.ts var SpringTensionFrictionDefaults = /* @__PURE__ */ (() => ({ tension: 500, friction: 10, tolerance: 1 / 1e4, velocity: 0 }))(); var SpringDampingDurationDefaults = { dampingRatio: 1, duration: 1, velocity: 0, mass: 1 }; function isDampingDurationSpringOptions(options) { if (!options) { return false; } return typeof options.dampingRatio === "number" || typeof options.duration === "number" || typeof options.mass === "number"; } var SpringAnimator = class { constructor(options, interpolation) { this.interpolation = interpolation; __publicField(this, "options"); __publicField(this, "current"); __publicField(this, "destination"); __publicField(this, "difference"); __publicField(this, "state"); __publicField(this, "integrator"); __publicField(this, "interpolator"); let _opt; if (isDampingDurationSpringOptions(options)) { const toPass = { ...SpringDampingDurationDefaults, ...options }; _opt = SpringCurveValueConverter.computeDerivedCurveOptions( toPass.dampingRatio, toPass.duration, toPass.velocity, toPass.mass ); } else { _opt = options; } this.options = { ...SpringTensionFrictionDefaults, ..._opt }; this.state = { x: 0, v: this.options.velocity }; this.integrator = new Integrator((state) => -this.options.tension * state.x - this.options.friction * state.v); } isReady() { return this.interpolator !== void 0 && this.difference !== void 0; } next(delta) { this.state = this.integrator.integrateState(this.state, delta); assert(this.interpolator !== void 0, "setFrom() or setTo() must be called before next()"); const value = this.interpolator(this.progress()); return value; } isFinished() { const positionNearZero = Math.abs(this.state.x) < this.options.tolerance; const velocityNearZero=M ath.abs(this.state.v) < this.options.tolerance; return positionNearZero && velocityNearZero; } setFrom(value) { this.current=v alue; this.updateInterpolator(); } setVelocity(velocity) { this.state.v=v elocity; } progress() { assert(this.difference !==v oid 0, "setTo() must be called before progress()" ); return 1 - this.state.x / this.difference; } // The spring always settles to 0, so we create an interpolation to the destination // And calculate the progress based on the current state and the span of the interpolation // This lets us integrate over state.x, even though Value is generic setTo(value) { assert(this.current !==v oid 0, "setFrom() must be called before setTo()" ); this.destination=v alue; this.difference=t his.interpolation.difference(this.destination, this.current); this.state.x=t his.difference; this.updateInterpolator(); } /** @internal */ getState() { return this.state; } updateInterpolator() { if (this.current===v oid 0 || this.destination===v oid 0) { return; } this.interpolator=t his.interpolation.interpolate(this.current, this.destination); } }; // ../../library/src/animation/Animators/InertialScrollAnimator.ts var Defaults={ velocity: 0, min: 0, max: 0, momentum: { friction: 2, tolerance: 10 }, bounce: { tension: 500, friction: 10, tolerance: 1 } }; var InertialScrollAnimator=c lass { constructor(options) { __publicField(this, "options" ); __publicField(this, "current" ); __publicField(this, "frictionAnimator" ); __publicField(this, "springAnimator" ); __publicField(this, "useSpring" ); this.options=O bject.assign({ ...Defaults }, options); this.frictionAnimator=n ew FrictionAnimator({ friction: this.options.momentum.friction, tolerance: this.options.momentum.tolerance, velocity: this.options.velocity }); this.springAnimator=n ew SpringAnimator( { tension: this.options.bounce.tension, friction: this.options.bounce.friction, tolerance: this.options.bounce.tolerance, velocity: this.options.velocity }, NumberInterpolation ); this.useSpring=f alse; } isReady() { return true; } next(delta) { this.current=t his.currentAnimator.next(delta); if (!this.useSpring) { this.tryTransitionToSpring(); } return this.current; } get currentAnimator() { if (this.useSpring) { return this.springAnimator; } return this.frictionAnimator; } isFinished() { return this.currentAnimator.isFinished(); } get state() { return this.currentAnimator.getState(); } setFrom(value) { this.setState({ x: value, v: this.state.v }); } setState(state) { this.frictionAnimator.setFrom(state.x); this.frictionAnimator.setVelocity(state.v); if (this.isValidState()) { return this.tryTransitionToSpring(); } else { let bound=0 ; if (this.state.x <=t his.options.min) { bound=t his.options.min; } if (this.state.x>= this.options.max) { bound = this.options.max; } return this.transitionToSpring(bound); } } setTo(destination) { this.frictionAnimator.setTo(destination); this.springAnimator.setTo(destination); } setLimits(min, max) { this.options.min = min; this.options.max = max; } // If the position is outside the min and max bounds, and traveling // further away, then transition from friction to spring animation tryTransitionToSpring() { const belowMinWithVelocity = this.state.x < this.options.min && this.state.v <=0 ; const aboveMaxWithVelocity=t his.state.x> this.options.max && this.state.v >= 0; if (belowMinWithVelocity || aboveMaxWithVelocity) { let bound; if (belowMinWithVelocity) { bound = this.options.min; } else { bound = this.options.max; } this.transitionToSpring(bound); } else { this.useSpring = false; } } transitionToSpring(bound) { this.springAnimator.setFrom(this.state.x); this.springAnimator.setVelocity(this.state.v); this.springAnimator.setTo(bound); this.useSpring = true; } // If the position is outside the min and max bounds, but traveling // back towards the bounds, check if the velocity is sufficient to // carry the position back within bounds. If it is, let friction do the // work. If not, the state is invalid, so use the spring. isValidState() { const belowMinTravelingBack = this.state.x < this.options.min && this.state.v> 0; const aboveMaxTravelingBack = this.state.x > this.options.max && this.state.v < 0; if (belowMinTravelingBack || aboveMaxTravelingBack) { let bound; if (belowMinTravelingBack) { bound=t his.options.min; } else { bound=t his.options.max; } const friction=t his.frictionAnimator.options.friction; const solution=1 - friction * (bound - this.state.x) / this.state.v; return solution> 0; } return true; } // The math behind _isValidState: // // 1. Integrate the friction animator's acceleration to find velocity // // a = - k * v // dv/dt = - k * v // Int(dv/v) = - k * Int(dt) // ln v = - k * t + C // // => Solve for C at t = 0 // // ln v(0) = - k * 0 + C // ln v(0) = C // // => Plug C back into v(t) // // ln v = - k * t + ln v(0) // e^(ln v) = e^(- k * t) + e^(ln v(0)) // v = v(0) * e^(- k * t) // // 2. Integrate velocity to find position // // Int(v) = v(0) * Int(e^(- k * t)) // x = - v(0) * e^(-k * t) / k + C // // => Solve for C at t = 0 // // x(0) = - v(0) * e^(-k * 0) / k + C // x(0) = - v(0) / k + C // x(0) + v(0) / k = C // // => Plug C back into x(t) // // x = - v(0) * e^(-k * t) / k + x(0) + v(0) / k // // 3. Check if a (real) solution exists for t for position x // // x = - v(0) * e^(-k * t) / k + x(0) + v(0) / k // x - x(0) = - v(0) * e^(-k * t) / k + v(0) / k // k * (x - x(0)) = - v(0) * e^(-k * t) + v(0) // k * (x - x(0)) - v(0) = - v(0) * e^(-k * t) // (k * (x - x(0)) - v(0)) / - v(0) = e^(-k * t) // 1 - (k * (x - x(0)) / v(0) = e^(-k * t) // ln(1 - (k * (x - x(0)) / v(0)) = -k * t // // Therefore, a real solution exists if 1 - (k * (x - x(0)) / v(0) > 0 }; // ../../library/src/render/types/Color/CSSNames.ts var cssNames = { aliceblue: "f0f8ff", antiquewhite: "faebd7", aqua: "0ff", aquamarine: "7fffd4", azure: "f0ffff", beige: "f5f5dc", bisque: "ffe4c4", black: "000", blanchedalmond: "ffebcd", blue: "00f", blueviolet: "8a2be2", brown: "a52a2a", burlywood: "deb887", burntsienna: "ea7e5d", cadetblue: "5f9ea0", chartreuse: "7fff00", chocolate: "d2691e", coral: "ff7f50", cornflowerblue: "6495ed", cornsilk: "fff8dc", crimson: "dc143c", cyan: "0ff", darkblue: "00008b", darkcyan: "008b8b", darkgoldenrod: "b8860b", darkgray: "a9a9a9", darkgreen: "006400", darkgrey: "a9a9a9", darkkhaki: "bdb76b", darkmagenta: "8b008b", darkolivegreen: "556b2f", darkorange: "ff8c00", darkorchid: "9932cc", darkred: "8b0000", darksalmon: "e9967a", darkseagreen: "8fbc8f", darkslateblue: "483d8b", darkslategray: "2f4f4f", darkslategrey: "2f4f4f", darkturquoise: "00ced1", darkviolet: "9400d3", deeppink: "ff1493", deepskyblue: "00bfff", dimgray: "696969", dimgrey: "696969", dodgerblue: "1e90ff", firebrick: "b22222", floralwhite: "fffaf0", forestgreen: "228b22", fuchsia: "f0f", gainsboro: "dcdcdc", ghostwhite: "f8f8ff", gold: "ffd700", goldenrod: "daa520", gray: "808080", green: "008000", greenyellow: "adff2f", grey: "808080", honeydew: "f0fff0", hotpink: "ff69b4", indianred: "cd5c5c", indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c", lavender: "e6e6fa", lavenderblush: "fff0f5", lawngreen: "7cfc00", lemonchiffon: "fffacd", lightblue: "add8e6", lightcoral: "f08080", lightcyan: "e0ffff", lightgoldenrodyellow: "fafad2", lightgray: "d3d3d3", lightgreen: "90ee90", lightgrey: "d3d3d3", lightpink: "ffb6c1", lightsalmon: "ffa07a", lightseagreen: "20b2aa", lightskyblue: "87cefa", lightslategray: "789", lightslategrey: "789", lightsteelblue: "b0c4de", lightyellow: "ffffe0", lime: "0f0", limegreen: "32cd32", linen: "faf0e6", magenta: "f0f", maroon: "800000", mediumaquamarine: "66cdaa", mediumblue: "0000cd", mediumorchid: "ba55d3", mediumpurple: "9370db", mediumseagreen: "3cb371", mediumslateblue: "7b68ee", mediumspringgreen: "00fa9a", mediumturquoise: "48d1cc", mediumvioletred: "c71585", midnightblue: "191970", mintcream: "f5fffa", mistyrose: "ffe4e1", moccasin: "ffe4b5", navajowhite: "ffdead", navy: "000080", oldlace: "fdf5e6", olive: "808000", olivedrab: "6b8e23", orange: "ffa500", orangered: "ff4500", orchid: "da70d6", palegoldenrod: "eee8aa", palegreen: "98fb98", paleturquoise: "afeeee", palevioletred: "db7093", papayawhip: "ffefd5", peachpuff: "ffdab9", peru: "cd853f", pink: "ffc0cb", plum: "dda0dd", powderblue: "b0e0e6", purple: "800080", rebeccapurple: "663399", red: "f00", rosybrown: "bc8f8f", royalblue: "4169e1", saddlebrown: "8b4513", salmon: "fa8072", sandybrown: "f4a460", seagreen: "2e8b57", seashell: "fff5ee", sienna: "a0522d", silver: "c0c0c0", skyblue: "87ceeb", slateblue: "6a5acd", slategray: "708090", slategrey: "708090", snow: "fffafa", springgreen: "00ff7f", steelblue: "4682b4", tan: "d2b48c", teal: "008080", thistle: "d8bfd8", tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee", wheat: "f5deb3", white: "fff", whitesmoke: "f5f5f5", yellow: "ff0", yellowgreen: "9acd32" }; // ../../library/src/render/types/Color/Utils.ts function modulate(value, rangeA, rangeB, limit = false) { const [fromLow, fromHigh] = rangeA; const [toLow, toHigh] = rangeB; const fromDelta = fromHigh - fromLow; if (fromDelta === 0) return (toHigh + toLow) / 2; const toDelta = toHigh - toLow; if (toDelta === 0) return toLow; const result = toLow + (value - fromLow) / fromDelta * toDelta; if (limit === true) { if (toLow < toHigh) { if (result < toLow) { return toLow; } if (result> toHigh) { return toHigh; } } else { if (result > toLow) { return toLow; } if (result < toHigh) { return toHigh; } } } return result; } function isNumeric(value) { return !Number.isNaN(value) && Number.isFinite(value); } function percentToFraction(val) { const digits=n umberFromString(val); if (digits !==v oid 0) { if (val.includes( "%" )) { return digits / 100; } return digits; } return 0; } function numberFromString(input) { const match=/ \d?\.?\d+/u.exec(input); return match ? Number(match[0]) : void 0; } // ../../library/src/render/types/Color/types.ts var ColorFormat=/ * @__PURE__ */ ((ColorFormat2)=> { ColorFormat2["RGB"] = "rgb"; ColorFormat2["HSL"] = "hsl"; ColorFormat2["HSV"] = "hsv"; ColorFormat2["HEX"] = "hex"; ColorFormat2["NAME"] = "name"; return ColorFormat2; })(ColorFormat || {}); var ColorMixModelType = /* @__PURE__ */ ((ColorMixModelType2) => { ColorMixModelType2["RGB"] = "rgb"; ColorMixModelType2["RGBA"] = "rgba"; ColorMixModelType2["HSL"] = "hsl"; ColorMixModelType2["HSLA"] = "hsla"; ColorMixModelType2["HUSL"] = "husl"; return ColorMixModelType2; })(ColorMixModelType || {}); // ../../library/src/render/types/Color/converters.ts var Hsluv = /* @__PURE__ */ (() => require_hsluv().Hsluv)(); var hsluvConverter = /* @__PURE__ */ new Hsluv(); function rgbToHsluv(r, g, b) { hsluvConverter.rgb_r = r / 255; hsluvConverter.rgb_g = g / 255; hsluvConverter.rgb_b = b / 255; hsluvConverter.rgbToHsluv(); return { h: hsluvConverter.hsluv_h, s: hsluvConverter.hsluv_s, l: hsluvConverter.hsluv_l }; } function rgbaFromHusl(h, s, l, a = 1) { hsluvConverter.hsluv_h = h; hsluvConverter.hsluv_s = s; hsluvConverter.hsluv_l = l; hsluvConverter.hsluvToRgb(); return { r: hsluvConverter.rgb_r * 255, g: hsluvConverter.rgb_g * 255, b: hsluvConverter.rgb_b * 255, a }; } function hsvToStr(h, s, v, a) { const _h = Math.round(h); const _s = Math.round(s * 100); const _v = Math.round(v * 100); return a === void 0 || a === 1 ? "hsv(" + _h + ", " + _s + "%, " + _v + "%)" : "hsva(" + _h + ", " + _s + "%, " + _v + "%, " + a + ")"; } function rgbToRgb(r, g, b) { return { r: isNumeric(r) ? bound01(r, 255) * 255 : 0, g: isNumeric(g) ? bound01(g, 255) * 255 : 0, b: isNumeric(b) ? bound01(b, 255) * 255 : 0 }; } function rgbToHex(r, g, b, allow3Char) { const hex2 = [ pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)) ]; if (allow3Char && hex2[0].charAt(0) === hex2[0].charAt(1) && hex2[1].charAt(0) === hex2[1].charAt(1) && hex2[2].charAt(0) === hex2[2].charAt(1)) { return hex2[0].charAt(0) + hex2[1].charAt(0) + hex2[2].charAt(0); } return hex2.join(""); } function rgbToHsl(r, g, b) { let l; let s; const _r = bound01(r, 255); const _g = bound01(g, 255); const _b = bound01(b, 255); const max = Math.max(_r, _g, _b); const min = Math.min(_r, _g, _b); let h = s = l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case _r: h = (_g - _b) / d + (_g < _b ? 6 : 0); break; case _g: h=( _b - _r) / d + 2; break; case _b: h=( _r - _g) / d + 4; break; } h /=6 ; } return { h: h * 360, s, l }; } function hue2rgb(p, q, t) { if (t < 0) { t +=1 ; } if (t> 1) { t -= 1; } if (t < 1 / 6) { return p + (q - p) * 6 * t; } if (t < 1 / 2) { return q; } if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; } return p; } function hslToRgb(h, s, l) { let r; let g; let b; h=b ound01(h, 360); s=b ound01(s * 100, 100); l=b ound01(l * 100, 100); if (s===0 ) { r=g=b=l ; } else { const q=l < 0.5 ? l * (1 + s) : l + s - l * s; const p=2 * l - q; r=h ue2rgb(p, q, h + 1 / 3); g=h ue2rgb(p, q, h); b=h ue2rgb(p, q, h - 1 / 3); } return { r: r * 255, g: g * 255, b: b * 255 }; } function rgbToHsv(r, g, b) { r=b ound01(r, 255); g=b ound01(g, 255); b=b ound01(b, 255); const max=M ath.max(r, g, b); const min=M ath.min(r, g, b); const d=m ax - min; let h=0 ; const s=m ax===0 ? 0 : d / max; const v=m ax; if (max===m in) { h=0 ; } else { switch (max) { case r: h=( g - b) / d + (g < b ? 6 : 0); break; case g: h=( b - r) / d + 2; break; case b: h=( r - g) / d + 4; break; } h /=6 ; } return { h, s, v }; } function hsvToRgb(h, s, v) { h=b ound01(h, 360) * 6; s=b ound01(s * 100, 100); v=b ound01(v * 100, 100); const i=M ath.floor(h); const f=h - i; const p=v * (1 - s); const q=v * (1 - f * s); const t=v * (1 - (1 - f) * s); const mod=i % 6; const r=[ v, q, p, p, t, v][mod]; const g=[ t, v, v, q, p, p][mod]; const b=[ p, p, t, v, v, q][mod]; return { r: r * 255, g: g * 255, b: b * 255 }; } function bound01(n, max) { let _max; let _n; if (typeof max==="string" ) _max=p arseFloat(max); else _max=m ax; if (typeof n==="string" ) { if (isOnePointZero(n)) { n="100%" ; } const processPercent=i sPercentage(n); _n=M ath.min(_max, Math.max(0, parseFloat(n))); if (processPercent) { _n=M ath.floor(_n * _max) / 100; } } else { _n=n ; } if (Math.abs(_n - _max) < 1e-6) { return 1; } return _n % _max / _max; } function isOnePointZero(n) { return typeof n==="string" && n.includes( "." ) && parseFloat(n)===1 ; } function isPercentage(n) { return typeof n==="string" && n.includes( "%" ); } function pad2(char) { if (char.length===1 ) { return "0" + char; } else { return "" + char; } } var matchers=/ * @__PURE__ */ (()=> { const cssInteger = "[-\\+]?\\d+%?"; const cssNumber = "[-\\+]?\\d*\\.\\d+%?"; const cssUnit = "(?:" + cssNumber + ")|(?:" + cssInteger + ")"; const permissiveMatch3 = "[\\s|\\(]+(" + cssUnit + ")[,|\\s]+(" + cssUnit + ")[,|\\s]+(" + cssUnit + ")\\s*\\)?"; const permissiveMatch4 = "[\\s|\\(]+(" + cssUnit + ")[,|\\s]+(" + cssUnit + ")[,|\\s]+(" + cssUnit + ")[,|\\s]+(" + cssUnit + ")\\s*\\)?"; return { rgb: new RegExp("rgb" + permissiveMatch3), rgba: new RegExp("rgba" + permissiveMatch4), hsl: new RegExp("hsl" + permissiveMatch3), hsla: new RegExp("hsla" + permissiveMatch4), hsv: new RegExp("hsv" + permissiveMatch3), hsva: new RegExp("hsva" + permissiveMatch4), hex3: /^([\da-f])([\da-f])([\da-f])$/iu, hex6: /^([\da-f]{2})([\da-f]{2})([\da-f]{2})$/iu, hex4: /^#?([\da-f])([\da-f])([\da-f])([\da-f])$/iu, hex8: /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{2})$/iu }; })(); function stringToObject(inputColor) { if (inputColor.includes("gradient(")) return false; if (inputColor.includes("var(")) return false; const trimLeft = /^[\s,#]+/u; let color2 = inputColor.replace(trimLeft, "").trimEnd().toLowerCase(); const namedColor = cssNames[color2]; if (namedColor) { color2 = namedColor; } if (color2 === "transparent") { return { r: 0, g: 0, b: 0, a: 0, format: "name" /* NAME */ }; } let match; if (match = matchers.rgb.exec(color2)) { return { r: parseInt(match[1] ?? ""), g: parseInt(match[2] ?? ""), b: parseInt(match[3] ?? ""), a: 1, format: "rgb" /* RGB */ }; } if (match = matchers.rgba.exec(color2)) { return { r: parseInt(match[1] ?? ""), g: parseInt(match[2] ?? ""), b: parseInt(match[3] ?? ""), a: parseFloat(match[4] ?? ""), format: "rgb" /* RGB */ }; } if (match = matchers.hsl.exec(color2)) { return { h: parseInt(match[1] ?? ""), s: percentToFraction(match[2] ?? ""), l: percentToFraction(match[3] ?? ""), a: 1, format: "hsl" /* HSL */ }; } if (match = matchers.hsla.exec(color2)) { return { h: parseInt(match[1] ?? ""), s: percentToFraction(match[2] ?? ""), l: percentToFraction(match[3] ?? ""), a: parseFloat(match[4] ?? ""), format: "hsl" /* HSL */ }; } if (match = matchers.hsv.exec(color2)) { return { h: parseInt(match[1] ?? ""), s: percentToFraction(match[2] ?? ""), v: percentToFraction(match[3] ?? ""), a: 1, format: "hsv" /* HSV */ }; } if (match = matchers.hsva.exec(color2)) { return { h: parseInt(match[1] ?? ""), s: percentToFraction(match[2] ?? ""), v: percentToFraction(match[3] ?? ""), a: parseFloat(match[4] ?? ""), format: "hsv" /* HSV */ }; } if (match = matchers.hex8.exec(color2)) { return { r: parseIntFromHex(match[1] ?? ""), g: parseIntFromHex(match[2] ?? ""), b: parseIntFromHex(match[3] ?? ""), a: convertHexToDecimal(match[4] ?? ""), format: namedColor ? "name" /* NAME */ : "hex" /* HEX */ }; } if (match = matchers.hex6.exec(color2)) { return { r: parseIntFromHex(match[1] ?? ""), g: parseIntFromHex(match[2] ?? ""), b: parseIntFromHex(match[3] ?? ""), a: 1, format: namedColor ? "name" /* NAME */ : "hex" /* HEX */ }; } if (match = matchers.hex4.exec(color2)) { return { r: parseIntFromHex(`${match[1]}${match[1]}`), g: parseIntFromHex(`${match[2]}${match[2]}`), b: parseIntFromHex(`${match[3]}${match[3]}`), a: convertHexToDecimal(match[4] + "" + match[4]), format: namedColor ? "name" /* NAME */ : "hex" /* HEX */ }; } if (match = matchers.hex3.exec(color2)) { return { r: parseIntFromHex(`${match[1]}${match[1]}`), g: parseIntFromHex(`${match[2]}${match[2]}`), b: parseIntFromHex(`${match[3]}${match[3]}`), a: 1, format: namedColor ? "name" /* NAME */ : "hex" /* HEX */ }; } else { return false; } } function parseIntFromHex(hex2) { return parseInt(hex2, 16); } function convertHexToDecimal(h) { return parseIntFromHex(h) / 255; } // ../../library/src/render/types/Color/p3.ts var p3Matcher = /^color\(display-p3\s+(? \d+\.\d+|\d+|\.\d+)\s+(? \d+\.\d+|\d+|\.\d+)\s+(?\d+\.\d+|\d+|\.\d+)(?:\s*\/\s*(?\d+\.\d+|\d+|\.\d+))?\)$/u; function parseP3(color2) { const match = p3Matcher.exec(color2); if (!match) return null; const { r = "0", g = "0", b = "0", a } = match.groups ?? {}; return { r: parseFloat(r), g: parseFloat(g), b: parseFloat(b), a: a ? parseFloat(a) : 1 }; } function convertRGBChannelToLrgb(c = 0) { const abs = Math.abs(c); if (abs <= 0.04045) return c / 12.92; return (Math.sign(c) || 1) * ((abs + 0.055) / 1.055) ** 2.4; } function convertRgbToLrgb({ r, g, b, a }) { return { r: convertRGBChannelToLrgb(r), g: convertRGBChannelToLrgb(g), b: convertRGBChannelToLrgb(b), a }; } function convertLrgbChannelToRgb(c=0) { const abs=Math.abs(c); if (abs> 31308e-7) return (Math.sign(c) || 1) * (1.055 * abs ** (1 / 2.4) - 0.055); return c * 12.92; } function convertLrgbToRgb({ r, g, b, a }) { return { r: convertLrgbChannelToRgb(r), g: convertLrgbChannelToRgb(g), b: convertLrgbChannelToRgb(b), a }; } var convertP3ToXyz65 = (color2) => { const { r, g, b, a } = convertRgbToLrgb(color2); return { x: 0.486570948648216 * r + 0.265667693169093 * g + 0.1982172852343625 * b, y: 0.2289745640697487 * r + 0.6917385218365062 * g + 0.079286914093745 * b, z: 0 * r + 0.0451133818589026 * g + 1.043944368900976 * b, a }; }; var convertXyz65ToRgb = ({ x = 0, y = 0, z = 0, a = 1 }) => { return convertLrgbToRgb({ r: x * 3.2409699419045226 - y * 1.537383177570094 - 0.4986107602930034 * z, g: x * -0.9692436362808796 + y * 1.8759675015077204 + 0.0415550574071756 * z, b: x * 0.0556300796969936 - y * 0.2039769588889765 + 1.0569715142428784 * z, a }); }; var convertRgbToXyz65 = (color2) => { const { r, g, b, a } = convertRgbToLrgb(color2); return { x: 0.4123907992659593 * r + 0.357584339383878 * g + 0.1804807884018343 * b, y: 0.2126390058715102 * r + 0.715168678767756 * g + 0.0721923153607337 * b, z: 0.0193308187155918 * r + 0.119194779794626 * g + 0.9505321522496607 * b, a }; }; var convertXyz65ToP3 = ({ x = 0, y = 0, z = 0, a = 1 }) => { return convertLrgbToRgb({ r: x * 2.4934969119414263 - y * 0.9313836179191242 - 0.402710784450717 * z, g: x * -0.8294889695615749 + y * 1.7626640603183465 + 0.0236246858419436 * z, b: x * 0.0358458302437845 - y * 0.0761723892680418 + 0.9568845240076871 * z, a }); }; function convertRGBToHSV({ r, g, b, a }) { const M = Math.max(r, g, b), m2 = Math.min(r, g, b); const res = { h: 0, s: M === 0 ? 0 : 1 - m2 / M, v: M, a }; if (M - m2 !== 0) { res.h = (M === r ? (g - b) / (M - m2) + (g < b ? 6 : 0) : M===g ? (b - r) / (M - m2) + 2 : (r - g) / (M - m2) + 4) * 60; } return res; } function normalizeHue(hue) { return (hue=hue % 360) < 0 ? hue + 360 : hue; } function convertHsvToRgb({ h=0, s=0, v=0, a=1 }) { const hue=normalizeHue(h); const f=Math.abs(hue / 60 % 2 - 1); switch (Math.floor(hue / 60)) { case 0: return { r: v, g: v * (1 - s * f), b: v * (1 - s), a }; case 1: return { r: v * (1 - s * f), g: v, b: v * (1 - s), a }; case 2: return { r: v * (1 - s), g: v, b: v * (1 - s * f), a }; case 3: return { r: v * (1 - s), g: v * (1 - s * f), b: v, a }; case 4: return { r: v * (1 - s * f), g: v * (1 - s), b: v, a }; case 5: return { r: v, g: v * (1 - s), b: v * (1 - s * f), a }; default: return { r: v * (1 - s), g: v * (1 - s), b: v * (1 - s), a }; } } function convertRgbToP3(color2) { return convertXyz65ToP3(convertRgbToXyz65(color2)); } function convertP3ToRgb(color2) { return convertXyz65ToRgb(convertP3ToXyz65(color2)); } // ../../library/src/render/types/Color/Color.ts var P3Color=class _P3Color { constructor(color2) { __publicField(this, "format" , "p3" ); __publicField(this, "r" ); __publicField(this, "g" ); __publicField(this, "b" ); __publicField(this, "a" ); this.r=color2.r ?? 0; this.g=color2.g ?? 0; this.b=color2.b ?? 0; this.a=color2.a ?? 1; } hsv() { return convertRGBToHSV(this); } rgb() { return convertP3ToRgb(this); } hsl() { return rgbToHsl(this.r, this.g, this.b); } toString(space="p3" , overrides) { switch (space) { case "p3" : { const r=(overrides==null ? void 0 : overrides.r) ?? this.r; const g=(overrides==null ? void 0 : overrides.g) ?? this.g; const b=(overrides==null ? void 0 : overrides.b) ?? this.b; const a=(overrides==null ? void 0 : overrides.a) ?? this.a; return a===1 ? `color(display-p3 ${r} ${g} ${b})` : `color(display-p3 ${r} ${g} ${b} / ${a})`; } case "srgb" : { const color2=this.rgb(); const clampedR=Math.round(Math.max(0, Math.min(color2.r, 1)) * 100) / 100; const clampedG=Math.round(Math.max(0, Math.min(color2.g, 1)) * 100) / 100; const clampedB=Math.round(Math.max(0, Math.min(color2.b, 1)) * 100) / 100; const r=(overrides==null ? void 0 : overrides.r) ?? clampedR * 255; const g=(overrides==null ? void 0 : overrides.g) ?? clampedG * 255; const b=(overrides==null ? void 0 : overrides.b) ?? clampedB * 255; const a=(overrides==null ? void 0 : overrides.a) ?? color2.a ?? 1; return a===1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`; } } } static isP3String(color2) { return color2.startsWith("color(display-p3"); } static fromHSV(color2, space="p3" ) { switch (space) { case "p3" : return new _P3Color(convertHsvToRgb(color2)); case "srgb" : return new _P3Color(convertRgbToP3(convertHsvToRgb(color2))); } } static fromRGB(color2) { return new _P3Color( convertRgbToP3({ // Converted an rgb value between 0-255 to a 0-1 decimal with 5 decimal places -> 0.78607. r: Math.round(color2.r / 255 * 1e4) / 1e4, g: Math.round(color2.g / 255 * 1e4) / 1e4, b: Math.round(color2.b / 255 * 1e4) / 1e4, a: color2.a ?? 1 }) ); } static fromRGBString(color2) { const value = Color(color2); if (!value) return void 0; return _P3Color.fromRGB(value); } static fromString(color2) { if (!_P3Color.isP3String(color2)) return void 0; const parsed = parseP3(color2); if (!parsed) return void 0; return new _P3Color({ r: parsed.r, g: parsed.g, b: parsed.b, a: parsed.a }); } static srgbFromValue(color2) { if (!isString(color2) || !Color.isP3String(color2)) return color2; const value = _P3Color.fromString(color2); if (!value) return color2; return value.toString("srgb"); } static multiplyAlpha(color2, alpha2) { return new _P3Color({ r: color2.r, g: color2.g, b: color2.b, a: color2.a * alpha2 }); } }; function clampRGB(color2) { return P3Color.srgbFromValue(color2); } var cache = /* @__PURE__ */ new Map(); var Color = /* @__PURE__ */ (() => { function Color2(color2, r, g, b) { if (typeof color2 === "string") { let c = cache.get(color2); if (c) return c; c = createColor(color2); if (c === void 0) return { ...Color2("black"), isValid: false }; cache.set(color2, c); return c; } const created = createColor(color2, r, g, b); return created !== void 0 ? created : { ...Color2("black"), isValid: false }; } function createColor(color2, r, g, b) { if (color2 === "") return void 0; const colorData = getCompleteColorStrategy(color2, r, g, b); if (colorData) { const newColor = { r: colorData.r, g: colorData.g, b: colorData.b, a: colorData.a, h: colorData.h, s: colorData.s, l: colorData.l, initialValue: typeof color2 === "string" && colorData.format !== "hsv" /* HSV */ ? color2 : void 0, roundA: Math.round(100 * colorData.a) / 100, format: colorData.format, mix: Color2.mix, toValue: () => Color2.toRgbString(newColor) }; return newColor; } else { return void 0; } } const ColorMixModel = { isRGB(colorModel) { return colorModel === "rgb" /* RGB */ || colorModel === "rgba" /* RGBA */; }, isHSL(colorModel) { return colorModel === "hsl" /* HSL */ || colorModel === "hsla" /* HSLA */; } }; Color2.inspect = (color2, initialValue) => { if (color2.format === "hsl" /* HSL */) { return `<${color2.constructor.name} h:${color2.h} s:${color2.s} l:${color2.l} a:${color2.a}>`; } else if (color2.format === "hex" /* HEX */ || color2.format === "name" /* NAME */) { return ` <${color2.constructor.name} "${initialValue}"> `; } else { return ` <${color2.constructor.name} r:${color2.r} g:${color2.g} b:${color2.b} a:${color2.a}>`; } }; Color2.isColor = (color2) => { if (typeof color2 === "string") { return Color2.isColorString(color2); } else { return Color2.isColorObject(color2); } }; Color2.isColorString = (colorString) => { if (typeof colorString === "string") { return stringToObject(colorString) !== false; } return false; }; Color2.isColorObject = (color2) => { return isObject2(color2) && typeof color2.r === "number" && typeof color2.g === "number" && typeof color2.b === "number" && typeof color2.h === "number" && typeof color2.s === "number" && typeof color2.l === "number" && typeof color2.a === "number" && typeof color2.roundA === "number" && typeof color2.format === "string"; }; Color2.toString = (color2) => { return Color2.toRgbString(color2); }; Color2.toHex = (color2, allow3Char = false) => { return rgbToHex(color2.r, color2.g, color2.b, allow3Char); }; Color2.toHexString = (color2, allow3Char = false) => { return `#${Color2.toHex(color2, allow3Char)}`; }; Color2.isP3String = (color2) => { if (typeof color2 !== "string") return false; return P3Color.isP3String(color2); }; Color2.toRgbString = (color2) => { return color2.a === 1 ? "rgb(" + Math.round(color2.r) + ", " + Math.round(color2.g) + ", " + Math.round(color2.b) + ")" : "rgba(" + Math.round(color2.r) + ", " + Math.round(color2.g) + ", " + Math.round(color2.b) + ", " + color2.roundA + ")"; }; Color2.toHusl = (color2) => { return { ...rgbToHsluv(color2.r, color2.g, color2.b), a: color2.roundA }; }; Color2.toHslString = (color2) => { const hsl = Color2.toHsl(color2); const h = Math.round(hsl.h); const s = Math.round(hsl.s * 100); const l = Math.round(hsl.l * 100); return color2.a === 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + color2.roundA + ")"; }; Color2.toHsv = (color2) => { const hsv = rgbToHsv(color2.r, color2.g, color2.b); return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: color2.a }; }; Color2.toHsvString = (color2) => { const hsv = rgbToHsv(color2.r, color2.g, color2.b); const h = Math.round(hsv.h * 360); const s = Math.round(hsv.s * 100); const v = Math.round(hsv.v * 100); return color2.a === 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + color2.roundA + ")"; }; Color2.toName = (color2) => { if (color2.a === 0) { return "transparent"; } if (color2.a < 1) { return false; } const hex2=rgbToHex(color2.r, color2.g, color2.b, true); for (const key7 of Object.keys(cssNames)) { const value=cssNames[key7]; if (value===hex2) { return key7; } } return false; }; Color2.toHsl=(color2)=> { return { h: Math.round(color2.h), s: color2.s, l: color2.l, a: color2.a }; }; Color2.toRgb = (color2) => { return { r: Math.round(color2.r), g: Math.round(color2.g), b: Math.round(color2.b), a: color2.a }; }; Color2.brighten = (color2, amount = 10) => { const rgb = Color2.toRgb(color2); rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))); rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))); rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))); return Color2(rgb); }; Color2.lighten = (color2, amount = 10) => { const hsl = Color2.toHsl(color2); hsl.l += amount / 100; hsl.l = Math.min(1, Math.max(0, hsl.l)); return Color2(hsl); }; Color2.darken = (color2, amount = 10) => { const hsl = Color2.toHsl(color2); hsl.l -= amount / 100; hsl.l = Math.min(1, Math.max(0, hsl.l)); return Color2(hsl); }; Color2.saturate = (color2, amount = 10) => { const hsl = Color2.toHsl(color2); hsl.s += amount / 100; hsl.s = Math.min(1, Math.max(0, hsl.s)); return Color2(hsl); }; Color2.desaturate = (color2, amount = 10) => { const hsl = Color2.toHsl(color2); hsl.s -= amount / 100; hsl.s = Math.min(1, Math.max(0, hsl.s)); return Color2(hsl); }; Color2.grayscale = (color2) => { return Color2.desaturate(color2, 100); }; Color2.hueRotate = (color2, angle) => { const hsl = Color2.toHsl(color2); hsl.h += angle; hsl.h = hsl.h > 360 ? hsl.h - 360 : hsl.h; return Color2(hsl); }; Color2.alpha = (color2, a = 1) => { return Color2({ r: color2.r, g: color2.g, b: color2.b, a }); }; Color2.transparent = (color2) => { return Color2.alpha(color2, 0); }; Color2.multiplyAlpha = (color2, alphaValue = 1) => { return Color2({ r: color2.r, g: color2.g, b: color2.b, a: color2.a * alphaValue }); }; Color2.interpolate = (colorA, colorB, model = "rgb" /* RGB */) => { if (!Color2.isColorObject(colorA) || !Color2.isColorObject(colorB)) { throw new TypeError("Both arguments for Color.interpolate must be Color objects"); } return (progress2) => { const color2 = Color2.mixAsColor(colorA, colorB, progress2, false, model); return color2; }; }; Color2.mix = (from, toColor, { model = "rgb" /* RGB */ } = {}) => { const fromColor = typeof from === "string" ? Color2(from) : from; const mixer = Color2.interpolate(fromColor, toColor, model); return (p) => Color2.toRgbString(mixer(p)); }; Color2.mixAsColor = (colorA, colorB, fraction2 = 0.5, limit = false, model = "rgb" /* RGB */) => { let result = null; if (ColorMixModel.isRGB(model)) { result = Color2({ r: modulate(fraction2, [0, 1], [colorA.r, colorB.r], limit), g: modulate(fraction2, [0, 1], [colorA.g, colorB.g], limit), b: modulate(fraction2, [0, 1], [colorA.b, colorB.b], limit), a: modulate(fraction2, [0, 1], [colorA.a, colorB.a], limit) }); } else { let hslA, hslB; if (ColorMixModel.isHSL(model)) { hslA = Color2.toHsl(colorA); hslB = Color2.toHsl(colorB); } else { hslA = Color2.toHusl(colorA); hslB = Color2.toHusl(colorB); } if (hslA.s === 0) { hslA.h = hslB.h; } else if (hslB.s === 0) { hslB.h = hslA.h; } const fromH = hslA.h; const toH = hslB.h; let deltaH = toH - fromH; if (deltaH > 180) { deltaH = toH - 360 - fromH; } else if (deltaH < -180) { deltaH=toH + 360 - fromH; } const tween={ h: modulate(fraction2, [0, 1], [fromH, fromH + deltaH], limit), s: modulate(fraction2, [0, 1], [hslA.s, hslB.s], limit), l: modulate(fraction2, [0, 1], [hslA.l, hslB.l], limit), a: modulate(fraction2, [0, 1], [colorA.a, colorB.a], limit) }; if (ColorMixModel.isHSL(model)) { result=Color2(tween); } else { result=Color2(rgbaFromHusl(tween.h, tween.s, tween.l, tween.a)); } } return result; }; Color2.random=(alphaValue=1)=> { function gen() { return Math.floor(Math.random() * 255); } return Color2("rgba(" + gen() + ", " + gen() + ", " + gen() + ", " + alphaValue + ")"); }; Color2.grey = (amount = 0.5, alphaValue = 1) => { amount = Math.floor(amount * 255); return Color2("rgba(" + amount + ", " + amount + ", " + amount + ", " + alphaValue + ")"); }; Color2.gray = Color2.grey; Color2.rgbToHsl = (r, g, b) => { return rgbToHsl(r, g, b); }; Color2.isValidColorProperty = (name, value) => { const isColorKey = name.toLowerCase().slice(-5) === "color" || name === "fill" || name === "stroke"; if (isColorKey && typeof value === "string" && Color2.isColorString(value)) { return true; } return false; }; Color2.difference = (colorA, colorB) => { const _r = (colorA.r + colorB.r) / 2; const deltaR = colorA.r - colorB.r; const deltaG = colorA.g - colorB.g; const deltaB = colorA.b - colorB.b; const deltaR2 = Math.pow(deltaR, 2); const deltaG2 = Math.pow(deltaG, 2); const deltaB2 = Math.pow(deltaB, 2); return Math.sqrt(2 * deltaR2 + 4 * deltaG2 + 3 * deltaB2 + _r * (deltaR2 - deltaB2) / 256); }; Color2.equal = (colorA, colorB, tolerance = 0.1) => { if (Math.abs(colorA.r - colorB.r) >= tolerance) { return false; } if (Math.abs(colorA.g - colorB.g) >= tolerance) { return false; } if (Math.abs(colorA.b - colorB.b) >= tolerance) { return false; } if (Math.abs(colorA.a - colorB.a) * 256 >= tolerance) { return false; } return true; }; const channelToDecimal = interpolate([0, 255], [0, 1]); function convertChannelToLinearRgb(channel) { channel = channelToDecimal(channel); const abs = Math.abs(channel); if (abs < 0.04045) return channel / 12.92; return (Math.sign(channel) || 1) * Math.pow((abs + 0.055) / 1.055, 2.4); } Color2.luminance=(color2)=> { const { r, g, b } = Color2.toRgb(color2); return 0.2126 * convertChannelToLinearRgb(r) + 0.7152 * convertChannelToLinearRgb(g) + 0.0722 * convertChannelToLinearRgb(b); }; Color2.contrast = (a, b) => { const l1 = Color2.luminance(a); const l2 = Color2.luminance(b); return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); }; return Color2; })(); function getCompleteColorStrategy(colorOrR, g, b, a = 1) { let completeColor; if (typeof colorOrR === "number" && !Number.isNaN(colorOrR) && typeof g === "number" && !Number.isNaN(g) && typeof b === "number" && !Number.isNaN(b)) { const _r = colorOrR; const _g = g; const _b = b; const _a = a; completeColor = getCompleteColorFromRGB({ r: _r, g: _g, b: _b, a: _a }); } else if (typeof colorOrR === "string") { completeColor = getCompleteColorFromString(colorOrR); } else if (typeof colorOrR === "object") { if (colorOrR.hasOwnProperty("r") && colorOrR.hasOwnProperty("g") && colorOrR.hasOwnProperty("b")) { completeColor = getCompleteColorFromRGB(colorOrR); } else { completeColor = getCompleteColorFromHSL(colorOrR); } } return completeColor; } function getCompleteColorFromString(color2) { const result = stringToObject(color2); if (result) { if (result.format === "hsl" /* HSL */) { return getCompleteColorFromHSL(result); } else if (result.format === "hsv" /* HSV */) { return getCompleteColorFromHSV(result); } else { return getCompleteColorFromRGB(result); } } } function getCompleteColorFromHSV(color2) { const rgb = hsvToRgb(color2.h, color2.s, color2.v); const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); return { ...hsl, ...rgb, format: "rgb" /* RGB */, a: color2.a !== void 0 ? correctAlpha(color2.a) : 1 }; } function getCompleteColorFromRGB(color2) { const rgb = rgbToRgb(color2.r, color2.g, color2.b); const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); return { ...hsl, ...rgb, format: "rgb" /* RGB */, a: color2.a !== void 0 ? correctAlpha(color2.a) : 1 }; } function getCompleteColorFromHSL(color2) { let h; let s; let l; let rgb = { r: 0, g: 0, b: 0 }; let hsl = { h: 0, s: 0, l: 0 }; h = isNumeric(color2.h) ? color2.h : 0; h = (h + 360) % 360; s = isNumeric(color2.s) ? color2.s : 1; if (typeof color2.s === "string") { s = numberFromString(color2.s); } l = isNumeric(color2.l) ? color2.l : 0.5; if (typeof color2.l === "string") { l = numberFromString(color2.l); } rgb = hslToRgb(h, s, l); hsl = { h, s, l }; return { ...rgb, ...hsl, a: color2.a === void 0 ? 1 : color2.a, format: "hsl" /* HSL */ }; } function correctAlpha(alphaValue) { alphaValue = parseFloat(alphaValue); if (alphaValue < 0) { alphaValue=0; } if (Number.isNaN(alphaValue) || alphaValue> 1) { alphaValue = 1; } return alphaValue; } // ../../library/src/interpolation/ColorInterpolation.ts var ColorInterpolation = (type = "husl" /* HUSL */) => { return { interpolate(from, to) { ; [from, to] = Interpolation.handleUndefined(from, to); return Color.interpolate(Color(from), Color(to), type); }, difference(from, to) { return Color.difference(Color(from), Color(to)); } }; }; // ../../library/src/interpolation/NoInterpolation.ts var NoInterpolation = { interpolate(from, to) { ; [from, to] = Interpolation.handleUndefined(from, to); return (progress2) => { return progress2 < 0.5 ? from : to; }; }, difference(from, to) { return from===to ? 0 : 1; } }; // ../../library/src/interpolation/ObjectInterpolation.ts var ObjectInterpolation=(valueInterpolation)=> { return { interpolate(from, to) { ; [from, to] = Interpolation.handleUndefined(from, to); const result = Object.assign({}, from); const interpolations = {}; const keys3 = /* @__PURE__ */ new Set(); for (const key7 in from) { interpolations[key7] = valueInterpolation.interpolate(from[key7], to[key7]); keys3.add(key7); } for (const key7 in to) { if (!keys3.has(key7)) { interpolations[key7] = valueInterpolation.interpolate(from[key7], to[key7]); keys3.add(key7); } } return (progress2) => { for (const key7 in interpolations) { result[key7] = interpolations[key7](progress2); } return result; }; }, difference(from, to) { let sum = 0; for (const key7 in from) { const difference = valueInterpolation.difference(from[key7], to[key7]); sum += Math.pow(difference, 2); } return Math.sqrt(sum); } }; }; // ../../library/src/interpolation/ValueInterpolation.ts var DefaultInterpolationOptions = { colorModel: "husl" /* HUSL */ }; var ValueInterpolation = class _ValueInterpolation { /** * @internal */ constructor(options = DefaultInterpolationOptions) { __publicField(this, "options"); /** * @internal */ __publicField(this, "interpolate", (from, to) => { ; [from, to] = Interpolation.handleUndefined(from, to); return this.interPolationForValue(from).interpolate(from, to); }); /** * @internal */ __publicField(this, "difference", (from, to) => { const interpolation = this.interPolationForValue(from); return interpolation.difference(from, to); }); this.options = { ...DefaultInterpolationOptions, ...options }; } /** * @internal */ interPolationForValue(value) { const type = typeof value; if (type === "number") { return NumberInterpolation; } else if (type === "boolean" || type === "function") { return NoInterpolation; } else if (Color.isColor(value)) { return ColorInterpolation(this.options.colorModel); } else if (type === "object") { if (value === null) { return NoInterpolation; } const constructor = value.constructor; if (constructor && isInterpolatable(constructor)) { const interpolation = constructor.interpolationFor(value, this); if (interpolation && interpolation !== this && interpolation.constructor !== _ValueInterpolation) { return interpolation; } } return ObjectInterpolation(this); } console.warn(`No interpolation defined for ${value}`); return NoInterpolation; } }; var AnyInterpolation = /* @__PURE__ */ new ValueInterpolation(); // ../../library/src/render/utils/isMotionValue.ts var isMotionValue2 = (v) => v instanceof MotionValue; // ../../library/src/animation/Animators/PrecalculatedAnimator.ts var Defaults2 = /* @__PURE__ */ (() => ({ delta: 1 / 60, maxValues: 1e4 }))(); var PrecalculatedAnimator = class { constructor(options) { __publicField(this, "animator"); __publicField(this, "values"); __publicField(this, "currentTime", 0); __publicField(this, "totalTime"); __publicField(this, "options"); this.options = { ...Defaults2, ...options }; this.animator = options.animator; } preCalculate() { if (!this.animator.isReady()) { return; } const { delta } = this.options; this.values = []; while (!this.animator.isFinished() && this.values.length < this.options.maxValues) { let value=this.animator.next(this.options.delta); if (typeof value==="object" && value) { const object=value; const copy={ ...object }; value=copy; } this.values.push(value); } this.totalTime=this.values.length * delta; } indexForTime(time2) { assert(this.values !==void 0, "values must be set before calling indexForTime()" ); assert(this.totalTime !==void 0, "totalTime must be set before calling indexForTime()" ); return Math.max( 0, Math.min(this.values.length - 1, Math.round(this.values.length * (time2 / this.totalTime)) - 1) ); } valueForTime(time2) { assert(this.values !==void 0, "values must be set before calling valueForTime()" ); const index=this.indexForTime(time2); const value=this.values[index]; return value; } setFrom(value) { this.animator.setFrom(value); this.preCalculate(); } setTo(end) { this.animator.setTo(end); this.preCalculate(); } isReady() { assert(this.totalTime !==void 0, "totalTime must be set before calling isReady()" ); return this.values !==void 0 && this.values.length> 0 && this.totalTime > 0; } next(delta) { this.currentTime += delta; return this.valueForTime(this.currentTime); } isFinished() { assert(this.totalTime !== void 0, "totalTime must be set before calling isFinished()"); return this.totalTime === 0 || this.currentTime >= this.totalTime; } get endValue() { this.preCalculate(); assert(this.totalTime !== void 0, "expecting totalTime to be set after calling preCalculate()"); const value = this.valueForTime(this.totalTime); assert(this.values !== void 0, "expecting values to be set after calling preCalculate()"); return this.values.length > 0 ? value : this.animator.next(0); } }; // ../../library/src/core/EventEmitter.ts var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)(); var EventEmitter = class { constructor() { __publicField(this, "_emitter", new EventEmitter3()); } eventNames() { return this._emitter.eventNames(); } eventListeners() { const listeners = {}; for (const eventName of this._emitter.eventNames()) { listeners[eventName] = this._emitter.listeners(eventName); } return listeners; } on(eventName, fn) { this.addEventListener(eventName, fn, false, false, this); } off(eventName, fn) { this.removeEventListeners(eventName, fn); } once(eventName, fn) { this.addEventListener(eventName, fn, true, false, this); } unique(eventName, fn) { this.addEventListener(eventName, fn, false, true, this); } addEventListener(eventName, fn, once, unique, context) { if (unique) { for (const name of this._emitter.eventNames()) { if (fn === this._emitter.listeners(name)) { return; } } } if (once === true) { this._emitter.once(eventName, fn, context); } else { this._emitter.addListener(eventName, fn, context); } } removeEventListeners(eventName, fn) { if (eventName) { this._emitter.removeListener(eventName, fn); } else { this.removeAllEventListeners(); } } removeAllEventListeners() { this._emitter.removeAllListeners(); } countEventListeners(eventName) { if (eventName) { return this._emitter.listeners(eventName).length; } else { let count = 0; for (const name of this._emitter.eventNames()) { count += this._emitter.listeners(name).length; } return count; } } emit(eventName, ...args) { this._emitter.emit(eventName, ...args); } }; // ../../library/src/core/Time.ts var _raf = (f) => { setTimeout(f, 1 / 60); }; var __raf = /* @__PURE__ */ (() => safeWindow["requestAnimationFrame"] || _raf)(); var raf = (f) => __raf(f); // ../../library/src/core/Loop.ts var LoopTimeStep = /* @__PURE__ */ (() => 1 / 60)(); var Loop = class extends EventEmitter { /** * @internal */ constructor(start = false) { super(); __publicField(this, "_started", false); __publicField(this, "_frame", 0); __publicField(this, "_frameTasks", []); /** * @internal */ __publicField(this, "tick", () => { if (!this._started) return; raf(this.tick); this.emit("update", this._frame, LoopTimeStep); this.emit("render", this._frame, LoopTimeStep); this._processFrameTasks(); this._frame++; }); if (start) { this.start(); } } /** * To add a task to be done at the end of a frame. * Tasks added from a task will be ignored. These will run after loop events have been processed. * @internal */ addFrameTask(task) { this._frameTasks.push(task); } _processFrameTasks() { var _a; const postEventTasks = this._frameTasks; const length = postEventTasks.length; if (length === 0) return; for (let i = 0; i < length; i++) { (_a=postEventTasks[i])==null ? void 0 : _a.call(postEventTasks); } postEventTasks.length=0; } /** * @internal */ static set TimeStep(value) { LoopTimeStep=value; } /** * @internal */ static get TimeStep() { return LoopTimeStep; } /** * @internal */ start() { if (this._started) return this; this._frame=0; this._started=true; raf(this.tick); return this; } /** * @internal * @deprecated Don’t use `stop` as you could be stopping the MainLoop for others. */ stop() { this._started=false; return this; } /** * @internal */ get frame() { return this._frame; } /** * @internal */ get time() { return this._frame * LoopTimeStep; } }; var MainLoop=/* @__PURE__ */ new Loop(); // ../../library/src/render/types/RenderEnvironment.ts var RenderEnvironment={ target: ( // Enable static renderer when taking screenshots // in screenshot-site lambda safeWindow.location.origin==="https://screenshot.framer.invalid" ? "EXPORT" /* export */ : "PREVIEW" /* preview */ ), zoom: 1 }; function executeInRenderEnvironment(customEnvironment, task) { const previousEnvironment=Object.assign({}, RenderEnvironment); Object.assign(RenderEnvironment, customEnvironment); const result=task(); Object.assign(RenderEnvironment, previousEnvironment); return result; } function setGlobalRenderEnvironment(environment2) { Object.assign(RenderEnvironment, environment2); } function useRenderEnvironment(target, zoom) { let willChangeElements=false; if (RenderEnvironment.target !==target) { RenderEnvironment.target=target; willChangeElements=true; } if (RenderEnvironment.zoom !==zoom) { RenderEnvironment.zoom=zoom; } return { willChangeElements }; } var RenderTarget={ /** * The component is to be rendered for the Framer canvas. * * @remarks * ```jsx * function App() { * if (RenderTarget.current()===RenderTarget.canvas) { * return * } * return * } * ``` */ canvas: "CANVAS" /* canvas */, /** * The component is to be rendered for export. * * @remarks * ```jsx * function App() { * if (RenderTarget.current() === RenderTarget.export) { * return * } * return * } * ``` */ export: "EXPORT" /* export */, /** * The component is to be rendered as a preview thumbnail, for example in the * component panel. * * @remarks * ```jsx * function App() { * if (RenderTarget.current() === RenderTarget.thumbnail) { * return * } * return * } * ``` */ thumbnail: "THUMBNAIL" /* thumbnail */, /** * The component is being rendered in the preview window. * * @remarks * ```jsx * function App() { * React.useEffect(() => { * if (RenderTarget.current() === RenderTarget.preview) { * // Do something in preview. * } * }) * return * } * ``` */ preview: "PREVIEW" /* preview */, /** * Returns the current `RenderTarget` allowing components to apply * different behaviors depending on the environment. * * @remarks * ```jsx * function App() { * if (RenderTarget.current() === RenderTarget.thumbnail) { * return * } * return ... * } * ``` */ current: () => RenderEnvironment.target, /** * Returns true if the current `RenderTarget` has performance restrictions. * Use this to avoid doing heavy work in these contexts because they may * bail on the rendering if the component takes too long. * * @remarks * ```jsx * function App() { * if (RenderTarget.hasRestrictions()) { * return * } * return * } * ``` */ hasRestrictions: () => { const target = RenderEnvironment.target; if (target === "CANVAS" /* canvas */) return true; if (target === "EXPORT" /* export */) return true; return false; } }; // ../../library/src/animation/Drivers/AnimationDriver.ts var AnimationDriver = class { constructor(animator, updateCallback, finishedCallback) { this.animator = animator; this.updateCallback = updateCallback; this.finishedCallback = finishedCallback; __publicField(this, "update", (frame2, elapsed) => { if (this.animator.isFinished()) { this.finish(); } else { const value = this.animator.next(elapsed); this.updateCallback(value); } }); if (!this.animator.isReady()) { console.warn("AnimationDriver initialized with animator that isn't ready"); } } finish() { if (this.finishedCallback) { this.finishedCallback(this.animator.isFinished()); } } isFinished() { return this.animator.isFinished(); } }; // ../../library/src/animation/Drivers/MainLoopDriver.ts var MainLoopAnimationDriver = class extends AnimationDriver { play() { if (RenderEnvironment.target !== RenderTarget.preview) { this.finishedCallback && this.finishedCallback(false); return; } MainLoop.on("update", this.update); } cancel() { MainLoop.off("update", this.update); } finish() { MainLoop.off("update", this.update); super.finish(); } }; // ../../library/src/animation/FramerAnimation.ts var DefaultDeprecatedAnimationOptions = { precalculate: false, colorModel: "husl" /* HUSL */ }; var FramerAnimation = class _FramerAnimation { /** * @internal */ constructor(target, from, to, animatorClass, options, driverClass = MainLoopAnimationDriver) { /** * @internal */ __publicField(this, "driver"); /** * @internal */ __publicField(this, "playStateSource", "idle"); /** * @internal */ __publicField(this, "onfinish"); /** * @internal */ __publicField(this, "oncancel"); /** * @internal */ __publicField(this, "readyPromise", Promise.resolve()); /** * @internal */ __publicField(this, "readyResolve", null); /** * @internal */ __publicField(this, "finishedPromise", Promise.resolve()); /** * @internal */ __publicField(this, "finishedResolve", null); /** * @internal */ // biome-ignore lint/suspicious/noExplicitAny: deprecated __publicField(this, "finishedReject", null); this.resetFinishedPromise(); const deprecatedAnimationOptions = { ...DefaultDeprecatedAnimationOptions }; const animatorOptions = {}; if (options) { Object.assign(deprecatedAnimationOptions, options); Object.assign(animatorOptions, options); } let interpolation; if (deprecatedAnimationOptions.customInterpolation) { interpolation = deprecatedAnimationOptions.customInterpolation; } else { interpolation = new ValueInterpolation(options); } let animator; if (!animatorClass) { animator = new BezierAnimator({}, interpolation); } else { animator = new animatorClass(animatorOptions, interpolation); } if (deprecatedAnimationOptions.precalculate) { animator = new PrecalculatedAnimator({ animator }); } animator.setFrom(from); animator.setTo(to); const updateCallback = (value) => { _FramerAnimation.driverCallbackHandler(target, value); }; const finishedCallback = (isFinished) => { if (isFinished) { _FramerAnimation.driverCallbackHandler(target, to); if (this.playStateSource === "running") { this.playStateValue = "finished"; } } }; this.driver = new driverClass(animator, updateCallback, finishedCallback); } /** * @internal */ static driverCallbackHandler(target, value) { if (isAnimatable(target) || isMotionValue2(target)) { target.set(value); } else { const targetObject = target; Animatable.transaction((update) => { for (const key7 in targetObject) { const targetValue = targetObject[key7]; if (isAnimatable(targetValue)) { update(targetValue, value[key7]); } else { targetObject[key7] = value[key7]; } } }); } } /** * @internal */ get playStateValue() { return this.playStateSource; } /** * @internal */ set playStateValue(value) { if (value !== this.playStateSource) { const oldValue = value; this.playStateSource = value; switch (value) { case "idle": if (oldValue === "running") { this.oncancel && this.oncancel(); } this.readyResolve && this.readyResolve(); this.resetReadyPromise(); break; case "finished": if (oldValue === "idle") { console.warn("Bad state transition"); break; } this.onfinish && this.onfinish(); this.finishedResolve && this.finishedResolve(); break; case "running": this.resetReadyPromise(); break; } if (oldValue === "finished") { this.resetFinishedPromise(); } if (value === "finished") { this.playStateValue = "idle"; } } } /** * @internal */ get playState() { return this.playStateValue; } /** * @internal */ resetReadyPromise() { this.readyResolve = null; this.readyPromise = new Promise((resolve, reject) => { this.readyResolve = resolve; }); } /** * Wait for the animation to be ready to play. * @remarks * ```jsx * const animation = animate.ease(value, 100) * animation.ready().then(() => { * // Animation is ready * }) * // async/await syntax * const animation = animate.ease(value, 100) * await animation.ready() * // Animation is ready * ``` * @returns Promise that is resolved when the animation is ready to play * @public */ get ready() { return this.readyPromise; } /** * @internal */ resetFinishedPromise() { this.finishedResolve = null; this.finishedReject = null; this.finishedPromise = new Promise((resolve, reject) => { this.finishedResolve = resolve; this.finishedReject = reject; }); this.finishedPromise.catch((reason) => { }); } /** * Wait for the animation to be finished. * @remarks * ```jsx * // async/await syntax * const animation = animate.ease(value, 100) * await animation.finished() * // Animation is finished * * * const animation = animate.ease(value, 100) * animation.ready().then(() => { * // Animation is finished * }) * ``` * @returns Promise that is resolved when the animation is ready to play * @public */ get finished() { return this.finishedPromise; } /** * @internal */ play() { this.playStateValue = "running"; this.driver.play(); } /** * Cancels the animation if it is still running. * @remarks * ```jsx * const animation = animate.ease(value, 100, {duration: 3}) * setTimeout(() => animation.cancel(), 500) * ``` * @public */ cancel() { if (this.playStateValue !== "running") { return; } this.driver.cancel(); if (this.playState !== "idle") { const reason = "AbortError"; this.finishedReject && this.finishedReject(reason); } this.playStateValue = "idle"; } /** * @internal */ finish() { if (this.playStateSource === "running") { this.playStateValue = "finished"; this.driver.finish(); } } /** * @internal */ isFinished() { return this.playStateValue === "finished"; } }; // ../../library/src/animation/Motion/autoValueHandlers.ts var correctBorderScale = (axis) => ({ correct: (latest, { delta, treeScale }) => { if (typeof latest === "string") latest = parseFloat(latest); if (latest === 0) return "0px"; let corrected = latest; if (delta && treeScale) { corrected = Math.round(latest / delta[axis].scale / treeScale[axis]); corrected = Math.max(corrected, 1); } return corrected + "px"; } }); // ../../library/src/animation/Motion/MotionSetup.tsx import { Fragment, jsx as jsx6 } from "react/jsx-runtime"; addScaleCorrector({ borderTopWidth: correctBorderScale("y"), borderLeftWidth: correctBorderScale("x"), borderRightWidth: correctBorderScale("x"), borderBottomWidth: correctBorderScale("y") }); function MotionSetup({ children }) { return /* @__PURE__ */ jsx6(Fragment, { children }); } // ../../library/src/animation/Motion/startAnimation.ts function startAnimation(_key, value, target, transition = {}) { warnOnce2( `"startAnimation" is unsupported. Use "animate" instead: https://www.framer.com/api/motion/utilities/#animate` ); return new Promise((resolve) => { animate(value, target, { ...transition, onComplete: () => resolve() }); }); } // ../../library/src/animation/animate.ts function deprecatedAnimate(from, to, animator, options) { deprecationWarning("animate()", "2.0.0", "the new animation API (https://www.framer.com/api/animation/)"); const target = from; let fromValue; if (isAnimatable(from) || isMotionValue2(from)) { fromValue = from.get(); } else { fromValue = Animatable.objectToValues(from); } const animation = new FramerAnimation(target, fromValue, to, animator, options); animation.play(); return animation; } var animate2 = /* @__PURE__ */ (() => { function animate3(from, to, animatorOrTransition, options) { return isAnimatable(from) ? deprecatedAnimate(from, to, animatorOrTransition, options) : animate(from, to, animatorOrTransition); } animate3.spring = (from, to, options) => { return animate3(from, to, SpringAnimator, options); }; animate3.bezier = (from, to, options) => { return animate3(from, to, BezierAnimator, options); }; animate3.linear = (from, to, options) => { return animate3.bezier(from, to, { ...options, curve: "linear" /* Linear */ }); }; animate3.ease = (from, to, options) => { return animate3.bezier(from, to, { ...options, curve: "ease" /* Ease */ }); }; animate3.easeIn = (from, to, options) => { return animate3.bezier(from, to, { ...options, curve: "ease-in" /* EaseIn */ }); }; animate3.easeOut = (from, to, options) => { return animate3.bezier(from, to, { ...options, curve: "ease-out" /* EaseOut */ }); }; animate3.easeInOut = (from, to, options) => { return animate3.bezier(from, to, { ...options, curve: "ease-in-out" /* EaseInOut */ }); }; return animate3; })(); // ../../library/src/components/AnimateLayout/LayoutIdContext.tsx import React12, { useCallback as useCallback5, useContext as useContext3, useMemo as useMemo3, useRef as useRef4 } from "react"; import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime"; var LayoutIdContext = /* @__PURE__ */ React12.createContext({ getLayoutId: (args) => null, persistLayoutIdCache: () => { }, top: false, enabled: true }); function LayoutIdProvider({ children }) { const context = useContext3(LayoutIdContext); if (context.top) return /* @__PURE__ */ jsx7(Fragment2, { children }); const cache2 = useRef4({ // When we provide a layoutId for a node based on it's first // duplicatedFrom id, we save it's layoutId mapped to it's actual id. // Future screen's nodes will check this cache first, to see if they've // previously been assigned a layoutId, or if any of there other // duplicatedFrom ids matched a node that was previously assigned a // layoutId. byId: {}, byName: {}, // When we navigate from screens that were duplicated from a future // screen, to that future screen, we want to do a reverse lookup on the // last duplicatedFrom id, rather than the id. We need to keep them // separate so they don't overlap. byLastId: {}, byPossibleId: {}, byLastName: {}, byLayoutId: {}, // When we don't have a cached layoutId for all duplicatedFrom ids, we // need to increment and save it so that we don't create clashing // layoutIds. We also need to reset name counts between screens, so we // record those separately. count: { byId: {}, byName: {} } }); const screen = useRef4({ byId: {}, byName: {}, byLastId: {}, byPossibleId: {}, byLastName: {}, byLayoutId: {} }); const usedIds = useRef4(/* @__PURE__ */ new Set()).current; const getLayoutId = useCallback5(({ id, name, duplicatedFrom }) => { if (!id) return null; const cacheKey = name ? "byName" : "byId"; const previousId = cache2.current[cacheKey][id]; if (previousId) return previousId; const nodeIdentifier = name || id; if (!duplicatedFrom && !usedIds.has(nodeIdentifier) && (!cache2.current.byLayoutId[nodeIdentifier] || cache2.current.byLayoutId[nodeIdentifier] === nodeIdentifier)) { if (cache2.current.count[cacheKey][nodeIdentifier] === void 0) { cache2.current.count[cacheKey][nodeIdentifier] = 0; cache2.current.byLayoutId[nodeIdentifier] = nodeIdentifier; screen.current[cacheKey][id] = nodeIdentifier; } usedIds.add(nodeIdentifier); return nodeIdentifier; } let possibleMatch = void 0; if (duplicatedFrom == null ? void 0 : duplicatedFrom.length) { for (let index = duplicatedFrom.length - 1; index >= 0; index--) { const duplicatedId = duplicatedFrom[index]; assert(!!duplicatedId, `duplicatedId must be defined`); const match = cache2.current[cacheKey][duplicatedId]; const byLastIdMatch = cache2.current.byLastId[duplicatedId]; if (byLastIdMatch && !possibleMatch) { const matchedLayoutId = cache2.current.byLayoutId[byLastIdMatch]; const shouldUseNamedLastIdMatch = !matchedLayoutId || matchedLayoutId === name; if (byLastIdMatch && !usedIds.has(byLastIdMatch) && (name ? shouldUseNamedLastIdMatch : true)) { possibleMatch = [byLastIdMatch, duplicatedId]; } } const previousLayoutId = match ? cache2.current.byLayoutId[match] : void 0; const shouldUseNamedMatch = !previousLayoutId || previousLayoutId === name; if (match && !usedIds.has(match) && (name ? shouldUseNamedMatch : true)) { screen.current[cacheKey][id] = match; screen.current.byLastId[duplicatedId] = match; usedIds.add(match); return match; } } } const last = cache2.current.byLastId[id]; if (last && !usedIds.has(last)) { usedIds.add(last); screen.current.byId[id] = last; return last; } if (possibleMatch) { const [match, duplicatedId] = possibleMatch; screen.current[cacheKey][id] = match; screen.current.byLastId[duplicatedId] = match; usedIds.add(match); return match; } const possible = cache2.current.byPossibleId[id]; if (possible && !usedIds.has(possible)) { usedIds.add(possible); screen.current.byId[id] = possible; return possible; } const rootDuplicatedId = duplicatedFrom == null ? void 0 : duplicatedFrom[0]; const identifier = name || rootDuplicatedId || id; const value = (cache2.current.count[cacheKey][identifier] ?? -1) + 1; const { layoutId, value: nextValue } = nextLayoutId(identifier, value, usedIds); cache2.current.count[cacheKey][identifier] = nextValue; screen.current[cacheKey][id] = layoutId; if (duplicatedFrom == null ? void 0 : duplicatedFrom.length) { if (!name) { const lastId = duplicatedFrom[duplicatedFrom.length - 1]; if (lastId) { screen.current.byLastId[lastId] = layoutId; } if (duplicatedFrom.length > 1) { for (let index = 0; index < duplicatedFrom.length - 1; index++) { const possibleId=duplicatedFrom[index]; if (possibleId===void 0) continue; if (!screen.current.byPossibleId[possibleId]) { screen.current.byPossibleId[possibleId]=layoutId; } } } } } screen.current.byLayoutId[layoutId]=nodeIdentifier; usedIds.add(layoutId); return layoutId; }, []); const persistLayoutIdCache=useCallback5(()=> { cache2.current = { byId: { ...cache2.current.byId, ...screen.current.byId }, byLastId: { ...cache2.current.byLastId, ...screen.current.byLastId }, byPossibleId: { ...cache2.current.byPossibleId, ...screen.current.byPossibleId }, byName: { ...cache2.current.byName, ...screen.current.byName }, byLastName: { ...cache2.current.byLastName, ...screen.current.byLastName }, byLayoutId: { ...cache2.current.byLayoutId, ...screen.current.byLayoutId }, // Unlike the count.byId, we need to reset the count.byName because // named layers might not have duplicatedFrom ids (e.g. imported // from Figma). When we can use duplicatedFrom ids to check if an id // was assigned on a previous screen, we don't increment the count, // which means that the count only increments for new items, and // only increments on a new screen if the node is new. Since named // layers need to always match in some way between screens, we reset // the count so that the second named layer on a second screen is // always name-1 if it doesn't have any duplicatedFrom ids. count: { ...cache2.current.count, byName: {} } }; screen.current = { byId: {}, byName: {}, byLastId: {}, byPossibleId: {}, byLastName: {}, byLayoutId: {} }; usedIds.clear(); }, []); const contextValue = useRef4({ getLayoutId, persistLayoutIdCache, top: true, enabled: true }).current; return /* @__PURE__ */ jsx7(LayoutIdContext.Provider, { value: contextValue, children }); } function nextLayoutId(identifier, initialValue, usedIds) { let value = initialValue; let layoutId = value ? `${identifier}-${value}` : identifier; while (usedIds.has(layoutId)) { value++; layoutId = `${identifier}-${value}`; } return { layoutId, value }; } function AutomaticLayoutIds({ enabled = true, ...props }) { const context = useContext3(LayoutIdContext); const contextValue = useMemo3(() => { return { ...context, enabled }; }, [enabled]); return /* @__PURE__ */ jsx7(LayoutIdContext.Provider, { ...props, value: contextValue }); } // ../../library/src/components/Device/Device.tsx import React13, { Component as Component2 } from "react"; // ../../library/src/components/utils/useConstant.ts import { useRef as useRef5 } from "react"; function useConstant(init) { const ref = useRef5(null); if (ref.current === null) { ref.current = init(); } return ref.current; } // ../../library/src/components/Device/ErrorPlaceholder.tsx import { jsx as jsx8, jsxs } from "react/jsx-runtime"; var baseStyle = { background: void 0, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", lineHeight: "1.4em", textOverflow: "ellipsis", overflow: "hidden", minHeight: 0, width: "100%", height: "100%" }; var errorStyle = /* @__PURE__ */ (() => ({ ...baseStyle, border: "1px solid rgba(149, 149, 149, 0.15)", borderRadius: 6, fontSize: "12px", backgroundColor: "rgba(149, 149, 149, 0.1)", color: "#a5a5a5" }))(); var textStyle = { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", maxWidth: "100%", flexShrink: 0, padding: `0 10px` }; var titleStyle = /* @__PURE__ */ (() => ({ ...textStyle, // TODO: Use Fresco tokens for this. fontWeight: 500 }))(); var messageStyle = /* @__PURE__ */ (() => ({ ...textStyle, whiteSpace: "pre", maxHeight: "calc(50% - calc(20px * var(--framerInternalCanvas-canvasPlaceholderContentScaleFactor, 1)))", WebkitMaskImage: "linear-gradient(to bottom, black 80%, transparent 100%)" }))(); function ErrorPlaceholder(props) { const { error, file } = props; const title = file ? `Error in ${stripSlash(file)}` : "Error"; const message = error instanceof Error ? error.message : "" + error; return /* @__PURE__ */ jsxs("div", { style: errorStyle, children: [ /* @__PURE__ */ jsx8("div", { className: "text", style: titleStyle, children: title }), message && /* @__PURE__ */ jsx8("div", { className: "text", style: messageStyle, children: message }) ] }); } function stripSlash(title) { if (title.startsWith("./")) { return title.replace("./", ""); } return title; } // ../../library/src/components/Device/Device.tsx import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime"; function getScaleData(deviceOptions, containerSize) { const { componentWidth, componentHeight } = getComponentSize(deviceOptions); const scaleX = containerSize.width / componentWidth; const scaleY = containerSize.height / componentHeight; const scale2 = Math.min(scaleX, scaleY, 1); let screenScalePixelFix = 1; if (scale2 < 1) { const actualScreenWidth=deviceOptions.screenWidth * scale2; const desiredScreenWidth=actualScreenWidth + 1; const screenScaleX=desiredScreenWidth / actualScreenWidth; const actualScreenHeight=deviceOptions.screenHeight * scale2; const desiredScreenHeight=actualScreenHeight + 1; const screenScaleY=desiredScreenHeight / actualScreenHeight; const screenScale=Math.max(screenScaleX, screenScaleY); screenScalePixelFix=screenScale; } return { scale: scale2, screenScalePixelFix, scaledComponentWidth: componentWidth * scale2, scaledComponentHeight: componentHeight * scale2, scaledDeviceWidth: deviceOptions.deviceWidth * scale2, scaledDeviceHeight: deviceOptions.deviceHeight * scale2 }; } function getColorsFromTheme(theme, type) { if (type==="none" ) return {}; if (!theme) return {}; const isDarkTheme=theme==="dark" ; return { shadowColor: isDarkTheme ? "rgba(0, 0, 0, 0.55)" : "rgba(0, 0, 0, 0.15)" , bezelColor: isDarkTheme ? "#222" : "#fff" , bezelShadeColor: isDarkTheme ? "#000" : "rgba(0, 0, 0, 0.2)" , screenColor: isDarkTheme ? "#333" : "#eee" }; } var ErrorBoundary=class extends Component2 { constructor() { super(...arguments); __publicField(this, "state" , {}); } componentDidCatch(error, info) { var _a; let stack=(_a=info.componentStack)==null ? void 0 : _a.split("\n").filter((line)=> line.length !== 0); let currentIndex = 0; if (stack) { for (const line of stack) { if (line.startsWith(` in ${this.constructor.name}`)) { break; } currentIndex++; } stack = stack.slice(0, currentIndex); } this.setState({ lastError: { error, componentStack: stack } }); } componentDidUpdate(_, prevState) { if (this.state.lastError === void 0) return; if (prevState.lastError === this.state.lastError) this.setState({ lastError: void 0 }); } render() { if (this.state.lastError) { return /* @__PURE__ */ jsx9(ErrorPlaceholder, { error: this.state.lastError.error.message, file: "Prototype" }); } return this.props.children; } }; function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 = safeWindow.ResizeObserver, ...options }) { var _a, _b; const optionsRef = React13.useRef(void 0); if (optionsRef.current === void 0) optionsRef.current = options; const deviceAppearance = (_a = options.deviceOptions) == null ? void 0 : _a.appearance.type; const scaleDataRef = React13.useRef(); const containerRef = React13.useRef(null); const deviceRef = React13.useRef(null); const screenRef = React13.useRef(null); const updateImperativeScale = React13.useCallback(({ scale: scale2, screenScalePixelFix }) => { if (!scaleDataRef.current || !deviceRef.current || !screenRef.current) return; deviceRef.current.style.transform = `scale(${scale2})`; screenRef.current.style.transform = `scale(${screenScalePixelFix})`; }, []); if (scaleDataRef.current === void 0 && options.deviceOptions && options.scaleTo && options.scaleTo !== "dynamic") { const scale2 = scaleDataRef.current = getScaleData(options.deviceOptions, options.scaleTo); updateImperativeScale(scale2); } const invertScale = React13.useCallback((point) => { if (!scaleDataRef.current) return point; const { scale: scale2 = 1 } = scaleDataRef.current; return { x: point.x / scale2, y: point.y / scale2 }; }, []); const updateScale = React13.useCallback(() => { const { deviceOptions, scaleTo } = optionsRef.current ?? {}; if (!deviceOptions || !scaleTo || scaleTo !== "dynamic" || !containerRef.current) return; if (containerRef.current.offsetWidth === 0 || containerRef.current.offsetHeight === 0) return; const scaleData = scaleDataRef.current = getScaleData(deviceOptions, { width: containerRef.current.offsetWidth, height: containerRef.current.offsetHeight }); updateImperativeScale(scaleData); }, [updateImperativeScale]); const observer = useConstant(() => { if (!ResizeObserver2) { return; } return new ResizeObserver2(() => updateScale()); }); React13.useLayoutEffect(() => { optionsRef.current = { deviceOptions: options.deviceOptions, overrideTheme: options.overrideTheme, scaleTo: options.scaleTo }; }, [options.deviceOptions, options.overrideTheme, options.scaleTo]); React13.useLayoutEffect(() => { updateScale(); }, [updateScale]); React13.useEffect(() => { if (!observer || !containerRef.current) return; observer.observe(containerRef.current); return () => observer.disconnect(); }, []); const { containerStyle, handStyle, deviceStyle, deviceImageStyle, screenStyle } = getDeviceStyle(options); const resizeStyles = canResize ? { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } : {}; const screenBackground = ((_b = options.deviceOptions) == null ? void 0 : _b.transparentBackground) ? "transparent" : "white"; return /* @__PURE__ */ jsx9("div", { style: { ...containerStyle, ...resizeStyles }, ref: containerRef, children: /* @__PURE__ */ jsxs2("div", { style: { ...deviceStyle }, ref: deviceRef, children: [ handStyle && /* @__PURE__ */ jsx9("div", { style: handStyle }), deviceAppearance === "external-clay" && deviceImageStyle && /* @__PURE__ */ jsx9("div", { style: deviceImageStyle }), /* @__PURE__ */ jsx9( "div", { style: { ...screenStyle, pointerEvents: void 0, backgroundColor: children ? screenBackground : screenStyle.backgroundColor }, ref: screenRef, children: /* @__PURE__ */ jsx9(MotionConfig, { transformPagePoint: invertScale, children: /* @__PURE__ */ jsx9(ErrorBoundary, { children }) }) } ), deviceAppearance === "realistic" && deviceImageStyle && /* @__PURE__ */ jsx9("div", { style: deviceImageStyle }) ] }) }); } var DEVICE_PADDING = 45; var HAND_IMG_WIDTH = 2400; var HAND_IMG_HEIGHT = 3740; var HAND_IMG_GAP_WIDTH = 859; var HAND_IMG_GAP_LEFT = 772; var HAND_IMG_GAP_BOTTOM = /* @__PURE__ */ (() => 992 - 5)(); var noDeviceSize = { componentWidth: 500, componentHeight: 500 }; function getComponentSize(options) { if (!options) return noDeviceSize; const { deviceWidth, deviceHeight, noPadding } = options; const padding = noPadding ? 0 : DEVICE_PADDING * 2; return { componentWidth: deviceWidth + padding, componentHeight: deviceHeight + padding }; } function getDeviceStyle({ scaleTo, deviceOptions, overrideTheme } = {}) { const noDeviceStyle = { containerStyle: {}, deviceStyle: {}, screenStyle: {} }; if (!deviceOptions) return noDeviceStyle; const { componentWidth, componentHeight } = getComponentSize(deviceOptions); const overriddenColors = getColorsFromTheme(overrideTheme, deviceOptions.appearance.type); const { deviceWidth, deviceHeight, appearance, screenWidth, screenHeight, screenMaxHeight, screenOffsetTop, screenOffsetLeft, screenRadius, screenMaskImage, screenColor, shadow, background, hand } = deviceOptions; const boxShadows = []; if (appearance.type === "clay" && shadow) { boxShadows.push(shadow); } let bezelStyle = void 0; if (appearance.type === "clay") { bezelStyle = { borderRadius: appearance.bezelRadius, backgroundColor: overriddenColors.bezelColor || appearance.bezelColor }; if (overriddenColors.bezelShadeColor || appearance.bezelShadeColor) { boxShadows.push(`inset 0 0 15px ${overriddenColors.bezelShadeColor || appearance.bezelShadeColor}`); } } const handOffsetLeft = (hand == null ? void 0 : hand.offsetLeft) ?? 0; const handOffsetRight = (hand == null ? void 0 : hand.offsetRight) ?? 0; const handOffsetBottom = (hand == null ? void 0 : hand.offsetBottom) ?? 0; const handScale = (deviceWidth - handOffsetLeft - handOffsetRight) / HAND_IMG_GAP_WIDTH; return { containerStyle: { width: scaleTo ? "100%" : componentWidth, height: scaleTo ? "100%" : componentHeight, flex: "1 1 0", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", background }, handStyle: hand && { width: HAND_IMG_WIDTH * handScale, height: HAND_IMG_HEIGHT * handScale, position: "absolute", pointerEvents: "none", backgroundImage: `url("${hand.imageUrl}")`, backgroundSize: "contain", backgroundRepeat: "no-repeat", left: -HAND_IMG_GAP_LEFT * handScale + handOffsetLeft, bottom: -HAND_IMG_GAP_BOTTOM * handScale + handOffsetBottom }, deviceStyle: { width: deviceWidth, height: deviceHeight, flexShrink: 0, position: "absolute", boxShadow: boxShadows.join(","), ...bezelStyle }, deviceImageStyle: appearance.type === "realistic" || appearance.type === "external-clay" ? { width: appearance.imageWidth, height: appearance.imageHeight, position: "absolute", pointerEvents: "none", overflow: "hidden", backgroundImage: `url("${appearance.imageUrl}")`, backgroundPosition: "top left", backgroundRepeat: "no-repeat", backgroundSize: `${appearance.imageWidth}px ${appearance.imageHeight}px`, // Rotate 90 degrees counter-clockwise around (0,0), then move the // result down into the viewport (rightmost transform is applied first). transformOrigin: "top left", transform: appearance.rotateImage ? `translateY(${appearance.imageWidth}px) rotate(-90deg)` : void 0 } : void 0, screenStyle: { width: screenWidth, height: screenHeight, maxHeight: screenMaxHeight, position: "absolute", top: screenOffsetTop, left: screenOffsetLeft, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderRadius: screenRadius, backgroundColor: overriddenColors.screenColor || screenColor, ...screenMaskImage && { maskImage: screenMaskImage, WebkitMaskImage: screenMaskImage, maskSize: "contain", WebkitMaskSize: "contain" } } }; } // ../../library/src/components/Device/DeviceCodeComponent.tsx import React17 from "react"; // ../../library/src/render/types/NewConstraints.tsx import React14 from "react"; // ../../library/src/render/utils/isFiniteNumber.ts function isFiniteNumber(value) { return Number.isFinite(value); } function finiteNumber(value) { return isFiniteNumber(value) ? value : void 0; } // ../../library/src/utils/type-guards.ts function isEmpty(obj) { return !obj || !Object.keys(obj).length && obj.constructor === Object; } function isReactElement(test) { return typeof test !== "string" && typeof test !== "number"; } function isReactChild(test) { return test !== null && typeof test !== "undefined" && typeof test !== "boolean" && !isEmpty(test); } // ../../library/src/render/utils/degreesToRadians.ts function degreesToRadians(degrees2) { return degrees2 * (Math.PI / 180); } // ../../library/src/render/types/Line.ts var Line = /* @__PURE__ */ (() => { function Line2(a, b) { return { a, b }; } Line2.offset = (line, offset) => { const angle = Point.angleFromX(line.a, line.b); const rad = degreesToRadians(angle); const x = offset * Math.sin(rad); const y = offset * Math.cos(rad); return Line2( { x: line.a.x + x, y: line.a.y - y }, { x: line.b.x + x, y: line.b.y - y } ); }; Line2.intersection = (lineA, lineB, segments) => { const x1 = lineA.a.x; const y1 = lineA.a.y; const x2 = lineA.b.x; const y2 = lineA.b.y; const x3 = lineB.a.x; const y3 = lineB.a.y; const x4 = lineB.b.x; const y4 = lineB.b.y; const a1 = (x4 - x3) * (y3 - y1) - (y4 - y3) * (x3 - x1); const b1 = (x4 - x3) * (y2 - y1) - (y4 - y3) * (x2 - x1); const c1 = (x2 - x1) * (y3 - y1) - (y2 - y1) * (x3 - x1); if (a1 === 0 && b1 === 0) return null; if (b1 === 0) return null; const alpha2 = a1 / b1; const beta = c1 / b1; if (segments && (alpha2 < 0 || alpha2> 1 || beta < 0 || beta> 1)) return null; return { x: x1 + alpha2 * (x2 - x1), y: y1 + alpha2 * (y2 - y1) }; }; Line2.intersectionAngle = (lineA, lineB) => { const deltaAX = lineA.b.x - lineA.a.x; const deltaAY = lineA.b.y - lineA.a.y; const deltaBX = lineB.b.x - lineB.a.x; const deltaBY = lineB.b.y - lineB.a.y; const angle = Math.atan2(deltaAX * deltaBY - deltaAY * deltaBX, deltaAX * deltaBX + deltaAY * deltaBY); return angle * (180 / Math.PI); }; Line2.isOrthogonal = (line) => { return line.a.x === line.b.x || line.a.y === line.b.y; }; Line2.perpendicular = (line, pointOnLine) => { const deltaX = line.a.x - line.b.x; const deltaY = line.a.y - line.b.y; const pointB = Point(pointOnLine.x - deltaY, pointOnLine.y + deltaX); return Line2(pointB, pointOnLine); }; Line2.projectPoint = (line, point) => { const perp = Line2.perpendicular(line, point); return Line2.intersection(line, perp); }; Line2.pointAtPercentDistance = (line, distance2) => { const hypotenuse = Line2.distance(line); const r = distance2 * hypotenuse / hypotenuse; return { x: r * line.b.x + (1 - r) * line.a.x, y: r * line.b.y + (1 - r) * line.a.y }; }; Line2.distance = (line) => { return Point.distance(line.a, line.b); }; return Line2; })(); // ../../library/src/render/types/Rect.ts var Rect = { /** * * @param rect - * @param other - * @returns if the input rectangles are equal in size and position * @public */ equals: function(rect, other) { if (rect === other) return true; if (!rect || !other) return false; return rect.x === other.x && rect.y === other.y && rect.width === other.width && rect.height === other.height; }, /** @internal */ from: (rect) => { return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }; }, /** @internal */ atOrigin: (size) => { return { x: 0, y: 0, width: size.width, height: size.height }; }, /** @internal */ fromTwoPoints: (a, b) => { return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(a.x - b.x), height: Math.abs(a.y - b.y) }; }, /** @internal */ fromRect: (rect) => { return { x: rect.left, y: rect.top, width: rect.right - rect.left, height: rect.bottom - rect.top }; }, /** @internal */ multiply: (rect, n) => { return { x: rect.x * n, y: rect.y * n, width: rect.width * n, height: rect.height * n }; }, /** @internal */ divide: (rect, n) => { return Rect.multiply(rect, 1 / n); }, /** @internal */ offset: (rect, delta) => { const xOffset = typeof delta.x === "number" ? delta.x : 0; const yOffset = typeof delta.y === "number" ? delta.y : 0; return { ...rect, x: rect.x + xOffset, y: rect.y + yOffset }; }, /** @internal */ inflate: (rect, value) => { if (value === 0) return rect; const doubleValue = 2 * value; return { x: rect.x - value, y: rect.y - value, width: rect.width + doubleValue, height: rect.height + doubleValue }; }, /** @internal */ pixelAligned: (rect) => { const x = Math.round(rect.x); const y = Math.round(rect.y); const rectMaxX = Math.round(rect.x + rect.width); const rectMaxY = Math.round(rect.y + rect.height); const width = Math.max(rectMaxX - x, 0); const height = Math.max(rectMaxY - y, 0); return { x, y, width, height }; }, /** @internal */ halfPixelAligned: (rect) => { const x = Math.round(rect.x * 2) / 2; const y = Math.round(rect.y * 2) / 2; const rectMaxX = Math.round((rect.x + rect.width) * 2) / 2; const rectMaxY = Math.round((rect.y + rect.height) * 2) / 2; const width = Math.max(rectMaxX - x, 1); const height = Math.max(rectMaxY - y, 1); return { x, y, width, height }; }, /** @internal */ round: (rect, decimals = 0) => { const x = roundedNumber(rect.x, decimals); const y = roundedNumber(rect.y, decimals); const width = roundedNumber(rect.width, decimals); const height = roundedNumber(rect.height, decimals); return { x, y, width, height }; }, /** @internal */ roundToOutside: (rect) => { const x = Math.floor(rect.x); const y = Math.floor(rect.y); const rectMaxX = Math.ceil(rect.x + rect.width); const rectMaxY = Math.ceil(rect.y + rect.height); const width = Math.max(rectMaxX - x, 0); const height = Math.max(rectMaxY - y, 0); return { x, y, width, height }; }, /** * @param rect - * @internal */ minX: (rect) => { return rect.x; }, /** * @param rect - * @internal */ maxX: (rect) => { return rect.x + rect.width; }, /** * @param rect - * @internal */ minY: (rect) => { return rect.y; }, /** * @param rect - * @internal */ maxY: (rect) => { return rect.y + rect.height; }, /** @internal */ positions: (rect) => { return { minX: rect.x, midX: rect.x + rect.width / 2, maxX: Rect.maxX(rect), minY: rect.y, midY: rect.y + rect.height / 2, maxY: Rect.maxY(rect) }; }, /** * * @param rect - * @internal */ center: (rect) => { return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }; }, /** @internal */ boundingRectFromPoints: (points) => { let minX = Infinity; let maxX = -Infinity; let minY = Infinity; let maxY = -Infinity; for (let i = 0; i < points.length; i++) { const point=points[i]; minX=Math.min(minX, point.x); maxX=Math.max(maxX, point.x); minY=Math.min(minY, point.y); maxY=Math.max(maxY, point.y); } return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }; }, /** * Returns the precise box defined by the given points, starting from the top-left point. This produces the same * Rect as Rect.boundingRectFromPoints *only* when the rect described by the points is not rotated. * * @internal */ fromPoints: (ps)=> { const [tl, tr, _, bl] = ps; const { x, y } = tl; const width = Point.distance(tl, tr); const height = Point.distance(tl, bl); return { x, y, width, height }; }, /** * Returns a rect containing all input rects * @param rect - a list of rectangles * @returns A rectangle that fits exactly around the input rects * @internal */ merge: (...rect) => { const min = { x: Math.min(...rect.map(Rect.minX)), y: Math.min(...rect.map(Rect.minY)) }; const max = { x: Math.max(...rect.map(Rect.maxX)), y: Math.max(...rect.map(Rect.maxY)) }; return Rect.fromTwoPoints(min, max); }, /** @internal */ intersection: (rect1, rect2) => { const x = Math.max(rect1.x, rect2.x); const x2 = Math.min(rect1.x + rect1.width, rect2.x + rect2.width); const y = Math.max(rect1.y, rect2.y); const y2 = Math.min(rect1.y + rect1.height, rect2.y + rect2.height); return { x, y, width: x2 - x, height: y2 - y }; }, /** * Returns all the corner points for a rect * @param rect - * @internal */ points: (rect) => { return [ { x: Rect.minX(rect), y: Rect.minY(rect) }, { x: Rect.minX(rect), y: Rect.maxY(rect) }, { x: Rect.maxX(rect), y: Rect.minY(rect) }, { x: Rect.maxX(rect), y: Rect.maxY(rect) } ]; }, /** * Returns all the corner points for a rect at the origin. * @internal */ pointsAtOrigin: (rect) => { return [ { x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height } ]; }, /** Takes a rect and transforms it by a matrix, resulting in the bounding rectangle of the * rotated and/or translated original. * @param rect - rectangle to transform * @param matrix - matrix to transform by * @returns The bounding rectangle of the rotated and/or translated rect. */ transform: (rect, matrix) => { const { x: x1, y: y1 } = matrix.transformPoint({ x: rect.x, y: rect.y }); const { x: x2, y: y2 } = matrix.transformPoint({ x: rect.x + rect.width, y: rect.y }); const { x: x3, y: y3 } = matrix.transformPoint({ x: rect.x + rect.width, y: rect.y + rect.height }); const { x: x4, y: y4 } = matrix.transformPoint({ x: rect.x, y: rect.y + rect.height }); const x = Math.min(x1, x2, x3, x4); const width = Math.max(x1, x2, x3, x4) - x; const y = Math.min(y1, y2, y3, y4); const height = Math.max(y1, y2, y3, y4) - y; return { x, y, width, height }; }, /** * Checks if a rectangle contains a point * @param rect - The rectangle to check * @param point - The point to check * @returns true if the provided rectangle contains the provided point * @internal */ containsPoint: (rect, point) => { if (point.x < Rect.minX(rect)) { return false; } if (point.x> Rect.maxX(rect)) { return false; } if (point.y < Rect.minY(rect)) { return false; } if (point.y> Rect.maxY(rect)) { return false; } if (Number.isNaN(rect.x)) { return false; } if (Number.isNaN(rect.y)) { return false; } return true; }, /** * Returns wether a rect contains another rect entirely * @param rectA - * @param rectB - * @returns true if rectA contains rectB */ containsRect: (rectA, rectB) => { for (const point of Rect.points(rectB)) { if (!Rect.containsPoint(rectA, point)) { return false; } } return true; }, /** @internal */ toCSS: (rect) => { return { display: "block", transform: `translate(${rect.x}px, ${rect.y}px)`, width: `${rect.width}px`, height: `${rect.height}px` }; }, /** @internal */ inset: (rect, n) => { return { x: rect.x + n, y: rect.y + n, width: Math.max(0, rect.width - 2 * n), height: Math.max(0, rect.height - 2 * n) }; }, /** @internal */ intersects: (rectA, rectB) => { return !(rectB.x >= Rect.maxX(rectA) || Rect.maxX(rectB) <= rectA.x || rectB.y> = Rect.maxY(rectA) || Rect.maxY(rectB) <= rectA.y); }, /** @internal */ overlapHorizontally: (rectA, rectB)=> { const aMax = Rect.maxX(rectA); const bMax = Rect.maxX(rectB); return aMax > rectB.x && bMax > rectA.x; }, /** @internal */ overlapVertically: (rectA, rectB) => { const aMax = Rect.maxY(rectA); const bMax = Rect.maxY(rectB); return aMax > rectB.y && bMax > rectA.y; }, /** @internal */ doesNotIntersect: (rect, rects) => { return rects.find((comparingRect) => { return Rect.intersects(comparingRect, rect); }) === void 0; }, /** * * @param rectA - * @param rectB - * @returns if the input rectangles are equal in size and position * @public * @deprecated: please use Rect.equals instead */ isEqual: (rectA, rectB) => { return Rect.equals(rectA, rectB); }, // @TODO: duplicate of points() /** * @returns [tl, tr, br, bl] * @internal */ cornerPoints: (rect) => { const rectMinX = rect.x; const rectMaxX = rect.x + rect.width; const rectMinY = rect.y; const rectMaxY = rect.y + rect.height; const corner1 = { x: rectMinX, y: rectMinY }; const corner2 = { x: rectMaxX, y: rectMinY }; const corner3 = { x: rectMaxX, y: rectMaxY }; const corner4 = { x: rectMinX, y: rectMaxY }; return [corner1, corner2, corner3, corner4]; }, /** @internal */ midPoints: (rect) => { const rectMinX = rect.x; const rectMidX = rect.x + rect.width / 2; const rectMaxX = rect.x + rect.width; const rectMinY = rect.y; const rectMidY = rect.y + rect.height / 2; const rectMaxY = rect.y + rect.height; const top = { x: rectMidX, y: rectMinY }; const right = { x: rectMaxX, y: rectMidY }; const bottom = { x: rectMidX, y: rectMaxY }; const left = { x: rectMinX, y: rectMidY }; return [top, right, bottom, left]; }, /** @internal */ pointDistance: (rect, point) => { let x = 0; let y = 0; if (point.x < rect.x) { x=rect.x - point.x; } else if (point.x> Rect.maxX(rect)) { x = point.x - Rect.maxX(rect); } if (point.y < rect.y) { y=rect.y - point.y; } else if (point.y> Rect.maxY(rect)) { y = point.y - Rect.maxY(rect); } return Point.distance({ x, y }, { x: 0, y: 0 }); }, delta: (a, b) => { const pointA = { x: Rect.minX(a), y: Rect.minY(a) }; const pointB = { x: Rect.minX(b), y: Rect.minY(b) }; return { x: pointA.x - pointB.x, y: pointA.y - pointB.y }; }, /** @internal */ withMinSize: (rect, minSize) => { const { width: minWidth, height: minHeight } = minSize; const diffX = rect.width - minWidth; const diffY = rect.height - minHeight; return { width: Math.max(rect.width, minWidth), height: Math.max(rect.height, minHeight), x: rect.width < minWidth ? rect.x + diffX / 2 : rect.x, y: rect.height < minHeight ? rect.y + diffY / 2 : rect.y }; }, /** * Return false if any point is not inside or on the provided rect. * @internal */ anyPointsOutsideRect: (rect, ps)=> { const rectMinX = Rect.minX(rect); const rectMinY = Rect.minY(rect); const rectMaxX = Rect.maxX(rect); const rectMaxY = Rect.maxY(rect); for (const point of ps) { if (point.x < rectMinX || point.x> rectMaxX) { return true; } if (point.y < rectMinY || point.y> rectMaxY) { return true; } } return false; }, /** @internal */ edges: (rect) => { const [tl, tr, br, bl] = Rect.cornerPoints(rect); return [Line(tl, tr), Line(tr, br), Line(br, bl), Line(bl, tl)]; }, /** * Return a new rect projected into a new position based on the anchor rect and the given direction/alignment. * @internal */ rebaseRectOnto: (rect, anchorRect, direction, alignment) => { const rebasedRect = { ...rect }; switch (direction) { case "bottom": case "top": switch (alignment) { case "start": rebasedRect.x = anchorRect.x; break; case "center": rebasedRect.x = anchorRect.x + anchorRect.width / 2 - rect.width / 2; break; case "end": rebasedRect.x = anchorRect.x + anchorRect.width - rect.width; break; default: assertNever(alignment); } break; case "left": rebasedRect.x = anchorRect.x - rect.width; break; case "right": rebasedRect.x = anchorRect.x + anchorRect.width; break; default: assertNever(direction); } switch (direction) { case "left": case "right": switch (alignment) { case "start": rebasedRect.y = anchorRect.y; break; case "center": rebasedRect.y = anchorRect.y + anchorRect.height / 2 - rect.height / 2; break; case "end": rebasedRect.y = anchorRect.y + anchorRect.height - rect.height; break; default: assertNever(alignment); } break; case "top": rebasedRect.y = anchorRect.y - rect.height; break; case "bottom": rebasedRect.y = anchorRect.y + anchorRect.height; break; default: assertNever(direction); } return rebasedRect; } }; // ../../library/src/render/types/Constraints.ts var constraintDefaults = { left: null, right: null, top: null, bottom: null, centerX: "50%", centerY: "50%", aspectRatio: null, parentSize: null, width: 100, height: 100 }; var DimensionType = /* @__PURE__ */ ((DimensionType2) => { DimensionType2[DimensionType2["FixedNumber"] = 0] = "FixedNumber"; DimensionType2[DimensionType2["Percentage"] = 1] = "Percentage"; DimensionType2[DimensionType2["Auto"] = 2] = "Auto"; DimensionType2[DimensionType2["FractionOfFreeSpace"] = 3] = "FractionOfFreeSpace"; DimensionType2[DimensionType2["Viewport"] = 4] = "Viewport"; return DimensionType2; })(DimensionType || {}); function isConstraintSupportingChild(child) { if (!isReactChild(child) || !isReactElement(child)) { return false; } return true; } var ConstraintMask = { // Modifies the constraint mask to remove invalid (mutually exclusive) options and returns the original. // TODO: this removes major inconsistencies but probably needs to be merged with ConstraintSolver. quickfix: (constraints) => { if (constraints.widthType === 2 /* Auto */ || constraints.heightType === 2 /* Auto */) { constraints.aspectRatio = null; } if (isFiniteNumber(constraints.aspectRatio)) { if (constraints.left && constraints.right) { constraints.widthType = 0 /* FixedNumber */; } if (constraints.top && constraints.bottom) { constraints.heightType = 0 /* FixedNumber */; } if (constraints.left && constraints.right && constraints.top && constraints.bottom) { constraints.bottom = false; } if (constraints.widthType !== 0 /* FixedNumber */ && constraints.heightType !== 0 /* FixedNumber */) { constraints.heightType = 0 /* FixedNumber */; } } if (constraints.left && constraints.right) { if (constraints.fixedSize || constraints.widthType === 2 /* Auto */ || isFiniteNumber(constraints.maxWidth)) { constraints.right = false; } constraints.widthType = 0 /* FixedNumber */; } if (constraints.top && constraints.bottom) { if (constraints.fixedSize || constraints.heightType === 2 /* Auto */ || isFiniteNumber(constraints.maxHeight)) { constraints.bottom = false; } constraints.heightType = 0 /* FixedNumber */; } return constraints; } }; function valueToDimensionType(value) { if (typeof value === "string") { const trimmedValue = value.trim(); if (trimmedValue === "auto") return 2 /* Auto */; if (trimmedValue.endsWith("fr")) return 3 /* FractionOfFreeSpace */; if (trimmedValue.endsWith("%")) return 1 /* Percentage */; if (trimmedValue.endsWith("vw") || trimmedValue.endsWith("vh")) return 4 /* Viewport */; } return 0 /* FixedNumber */; } var ConstraintValues = { // Returns concrete current values given some ConstraintProperties. fromProperties: (props) => { const { left, right, top, bottom, width, height, centerX, centerY, aspectRatio, autoSize } = props; const constraints = ConstraintMask.quickfix({ left: isFiniteNumber(left) || isAnimatable(left), right: isFiniteNumber(right) || isAnimatable(right), top: isFiniteNumber(top) || isAnimatable(top), bottom: isFiniteNumber(bottom) || isAnimatable(bottom), widthType: valueToDimensionType(width), heightType: valueToDimensionType(height), aspectRatio: aspectRatio || null, fixedSize: autoSize === true }); let widthValue = null; let heightValue = null; let widthType = 0 /* FixedNumber */; let heightType = 0 /* FixedNumber */; if (constraints.widthType !== 0 /* FixedNumber */ && typeof width === "string") { const parsedWidth = parseFloat(width); if (width.endsWith("fr")) { widthType = 3 /* FractionOfFreeSpace */; widthValue = parsedWidth; } else if (width === "auto") { widthType = 2 /* Auto */; } else { widthType = 1 /* Percentage */; widthValue = parsedWidth / 100; } } else if (width !== void 0 && typeof width !== "string") { widthValue = Animatable.getNumber(width); } if (constraints.heightType !== 0 /* FixedNumber */ && typeof height === "string") { const parsedHeight = parseFloat(height); if (height.endsWith("fr")) { heightType = 3 /* FractionOfFreeSpace */; heightValue = parsedHeight; } else if (height === "auto") { heightType = 2 /* Auto */; } else { heightType = 1 /* Percentage */; heightValue = parseFloat(height) / 100; } } else if (height !== void 0 && typeof height !== "string") { heightValue = Animatable.getNumber(height); } let centerAnchorX = 0.5; let centerAnchorY = 0.5; if (centerX) { centerAnchorX = parseFloat(centerX) / 100; } if (centerY) { centerAnchorY = parseFloat(centerY) / 100; } return { left: constraints.left ? Animatable.getNumber(left) : null, right: constraints.right ? Animatable.getNumber(right) : null, top: constraints.top ? Animatable.getNumber(top) : null, bottom: constraints.bottom ? Animatable.getNumber(bottom) : null, widthType, heightType, width: widthValue, height: heightValue, aspectRatio: constraints.aspectRatio || null, centerAnchorX, centerAnchorY }; }, toSize: (values, parentSizeInfo, autoSize, freeSpace) => { let width = null; let height = null; const parentWidth = (parentSizeInfo == null ? void 0 : parentSizeInfo.sizing) ? Animatable.getNumber(parentSizeInfo == null ? void 0 : parentSizeInfo.sizing.width) : null; const parentHeight = (parentSizeInfo == null ? void 0 : parentSizeInfo.sizing) ? Animatable.getNumber(parentSizeInfo == null ? void 0 : parentSizeInfo.sizing.height) : null; const hOpposingPinsOffset = pinnedOffset(values.left, values.right); if (parentWidth && isFiniteNumber(hOpposingPinsOffset)) { width = parentWidth - hOpposingPinsOffset; } else if (autoSize && values.widthType === 2 /* Auto */) { width = autoSize.width; } else if (isFiniteNumber(values.width)) { switch (values.widthType) { case 0 /* FixedNumber */: width = values.width; break; case 3 /* FractionOfFreeSpace */: width = freeSpace ? freeSpace.freeSpaceInParent.width / freeSpace.freeSpaceUnitDivisor.width * values.width : null; break; case 1 /* Percentage */: case 4 /* Viewport */: if (parentWidth) { width = parentWidth * values.width; } break; case 2 /* Auto */: break; default: assertNever(values.widthType); } } const vOpposingPinsOffset = pinnedOffset(values.top, values.bottom); if (parentHeight && isFiniteNumber(vOpposingPinsOffset)) { height = parentHeight - vOpposingPinsOffset; } else if (autoSize && values.heightType === 2 /* Auto */) { height = autoSize.height; } else if (isFiniteNumber(values.height)) { switch (values.heightType) { case 0 /* FixedNumber */: height = values.height; break; case 3 /* FractionOfFreeSpace */: height = freeSpace ? freeSpace.freeSpaceInParent.height / freeSpace.freeSpaceUnitDivisor.height * values.height : null; break; case 1 /* Percentage */: case 4 /* Viewport */: if (parentHeight) { height = parentHeight * values.height; } break; case 2 /* Auto */: break; default: assertNever(values.heightType); } } return sizeAfterApplyingConstraintsAndAspectRatio( width, height, values, { height: parentHeight ?? 0, width: parentWidth ?? 0 }, parentSizeInfo == null ? void 0 : parentSizeInfo.viewport ); }, // Returns a parent-relative rect given concrete ConstraintValues. toRect: (values, parentSizeInfo = null, autoSize = null, pixelAlign = false, freeSpace = null) => { let x = values.left || 0; let y = values.top || 0; const { width, height } = ConstraintValues.toSize(values, parentSizeInfo, autoSize, freeSpace); const parentSizeForPositioning = (parentSizeInfo == null ? void 0 : parentSizeInfo.positioning) ?? null; const positioningParentWidth = parentSizeForPositioning ? Animatable.getNumber(parentSizeForPositioning.width) : null; const positioningParentHeight = parentSizeForPositioning ? Animatable.getNumber(parentSizeForPositioning.height) : null; if (values.left !== null) { x = values.left; } else if (positioningParentWidth && values.right !== null) { x = positioningParentWidth - values.right - width; } else if (positioningParentWidth) { x = values.centerAnchorX * positioningParentWidth - width / 2; } if (values.top !== null) { y = values.top; } else if (positioningParentHeight && values.bottom !== null) { y = positioningParentHeight - values.bottom - height; } else if (positioningParentHeight) { y = values.centerAnchorY * positioningParentHeight - height / 2; } const f = { x, y, width, height }; if (pixelAlign) { return Rect.pixelAligned(f); } return f; } }; var defaultWidth = 200; var defaultHeight = 200; function getConstraintValue(constraint, value, parentSize, viewport) { if (typeof value === "string") { if (value.endsWith("%") && parentSize) { switch (constraint) { case "maxWidth": case "minWidth": return parseFloat(value) / 100 * parentSize.width; case "maxHeight": case "minHeight": return parseFloat(value) / 100 * parentSize.height; default: break; } } if (value.endsWith("vh")) { if (!viewport) return constraintValueForUncalculatedViewport(constraint); switch (constraint) { case "maxWidth": case "minWidth": return parseFloat(value) / 100 * viewport.width; case "maxHeight": case "minHeight": return parseFloat(value) / 100 * viewport.height; default: break; } } return parseFloat(value); } return value; } function constraintValueForUncalculatedViewport(constraint) { switch (constraint) { case "minWidth": case "minHeight": return Number.NEGATIVE_INFINITY; case "maxWidth": case "maxHeight": return Number.POSITIVE_INFINITY; default: assertNever(constraint, "unknown constraint key"); } } function constrainHeight(height, values, parentSize, viewport) { if (values.minHeight) { height = Math.max(getConstraintValue("minHeight", values.minHeight, parentSize, viewport), height); } if (values.maxHeight) { height = Math.min(getConstraintValue("maxHeight", values.maxHeight, parentSize, viewport), height); } return height; } function constrainWidth(width, values, parentSize, viewport) { if (values.minWidth) { width = Math.max(getConstraintValue("minWidth", values.minWidth, parentSize, viewport), width); } if (values.maxWidth) { width = Math.min(getConstraintValue("maxWidth", values.maxWidth, parentSize, viewport), width); } return width; } function sizeAfterApplyingConstraintsAndAspectRatio(width, height, values, parentSize, viewport) { let w = constrainWidth(isFiniteNumber(width) ? width : defaultWidth, values, parentSize, viewport); let h = constrainHeight(isFiniteNumber(height) ? height : defaultHeight, values, parentSize, viewport); if (isFiniteNumber(values.aspectRatio) && values.aspectRatio > 0) { if (isFiniteNumber(values.left) && isFiniteNumber(values.right)) { h = w / values.aspectRatio; } else if (isFiniteNumber(values.top) && isFiniteNumber(values.bottom)) { w = h * values.aspectRatio; } else if (values.widthType !== 0 /* FixedNumber */) { h = w / values.aspectRatio; } else { w = h * values.aspectRatio; } } return { width: w, height: h }; } function pinnedOffset(start, end) { if (!isFiniteNumber(start) || !isFiniteNumber(end)) return null; return start + end; } // ../../library/src/render/types/NewConstraints.tsx import { Fragment as Fragment3, jsx as jsx10 } from "react/jsx-runtime"; function containsInvalidStringValues(props) { if (typeof props.right === "string") return true; if (typeof props.bottom === "string") return true; if (typeof props.left === "string" && (!props.center || props.center === "y")) { return true; } if (typeof props.top === "string" && (!props.center || props.center === "x")) { return true; } return false; } function constraintsEnabled(props) { if (!props._constraints) return false; if (containsInvalidStringValues(props)) return false; return props._constraints.enabled; } function sizeFromFiniteNumberProps(props) { const { size } = props; let { width, height } = props; if (isFiniteNumber(size)) { if (width === void 0) { width = size; } if (height === void 0) { height = size; } } if (isFiniteNumber(width) && isFiniteNumber(height)) { return { width, height }; } return null; } function rectFromFiniteNumberProps(props) { const size = sizeFromFiniteNumberProps(props); if (size === null) { return null; } const { left, top } = props; if (isFiniteNumber(left) && isFiniteNumber(top)) { return { x: left, y: top, ...size }; } return null; } function calculateRect(props, parentSize, pixelAlign = true) { if (props.positionFixed || props.positionAbsolute) return null; const parentSizeDisabled = parentSize === 1 /* Disabled */ || parentSize === 2 /* DisabledForCurrentLevel */; if (!constraintsEnabled(props) || parentSizeDisabled) { return rectFromFiniteNumberProps(props); } const constraintValues = getConstraintValues(props); const enabledParentSize = deprecatedParentSize(parentSize); const parentSizeInfo = enabledParentSize ? { sizing: enabledParentSize, positioning: enabledParentSize, viewport: null } : null; return ConstraintValues.toRect(constraintValues, parentSizeInfo, null, pixelAlign, null); } function getConstraintValues(props) { const { left, right, top, bottom, center, _constraints, size } = props; let { width, height } = props; if (width === void 0) { width = size; } if (height === void 0) { height = size; } const { aspectRatio, autoSize } = _constraints; const constraintMask = ConstraintMask.quickfix({ left: isFiniteNumber(left), right: isFiniteNumber(right), top: isFiniteNumber(top), bottom: isFiniteNumber(bottom), widthType: valueToDimensionType(width), heightType: valueToDimensionType(height), aspectRatio: aspectRatio || null, fixedSize: autoSize === true }); let widthValue = null; let heightValue = null; let widthType = 0 /* FixedNumber */; let heightType = 0 /* FixedNumber */; if (constraintMask.widthType !== 0 /* FixedNumber */ && typeof width === "string") { const parsedWidth = parseFloat(width); if (width.endsWith("fr")) { widthType = 3 /* FractionOfFreeSpace */; widthValue = parsedWidth; } else if (width === "auto") { widthType = 2 /* Auto */; } else { widthType = 1 /* Percentage */; widthValue = parsedWidth / 100; } } else if (width !== void 0 && typeof width !== "string") { widthValue = width; } if (constraintMask.heightType !== 0 /* FixedNumber */ && typeof height === "string") { const parsedHeight = parseFloat(height); if (height.endsWith("fr")) { heightType = 3 /* FractionOfFreeSpace */; heightValue = parsedHeight; } else if (height === "auto") { heightType = 2 /* Auto */; } else { heightType = 1 /* Percentage */; heightValue = parseFloat(height) / 100; } } else if (height !== void 0 && typeof height !== "string") { heightValue = height; } let centerAnchorX = 0.5; let centerAnchorY = 0.5; if (center === true || center === "x") { constraintMask.left = false; if (typeof left === "string") { centerAnchorX = parseFloat(left) / 100; } } if (center === true || center === "y") { constraintMask.top = false; if (typeof top === "string") { centerAnchorY = parseFloat(top) / 100; } } return { // Because we check isFiniteNumber when creating the masks, // We know that left, right, top and bottom are numbers if the mask is true for the corresponding value // We need to cast this because typescript does not understand that left: constraintMask.left ? left : null, right: constraintMask.right ? right : null, top: constraintMask.top ? top : null, bottom: constraintMask.bottom ? bottom : null, widthType, heightType, width: widthValue, height: heightValue, aspectRatio: constraintMask.aspectRatio || null, centerAnchorX, centerAnchorY, minHeight: props.minHeight, maxHeight: props.maxHeight, minWidth: props.minWidth, maxWidth: props.maxWidth }; } var ParentSizeState = /* @__PURE__ */ ((ParentSizeState2) => { ParentSizeState2[ParentSizeState2["Unknown"] = 0] = "Unknown"; ParentSizeState2[ParentSizeState2["Disabled"] = 1] = "Disabled"; ParentSizeState2[ParentSizeState2["DisabledForCurrentLevel"] = 2] = "DisabledForCurrentLevel"; return ParentSizeState2; })(ParentSizeState || {}); var ConstraintsContext = /* @__PURE__ */ React14.createContext({ parentSize: 0 /* Unknown */ }); function deprecatedParentSize(parentSize) { if (parentSize === 0 /* Unknown */ || parentSize === 1 /* Disabled */ || parentSize === 2 /* DisabledForCurrentLevel */) { return null; } return parentSize; } function useParentSize() { return React14.useContext(ConstraintsContext).parentSize; } function isSize(o) { return typeof o === "object"; } var ProvideParentSize = (props) => { const currentParentSize = useParentSize(); const { parentSize, children } = props; const value = React14.useMemo( () => ({ parentSize }), [getParentWidth(parentSize), getParentHeight(parentSize)] ); if (currentParentSize === 1 /* Disabled */) { return children ? /* @__PURE__ */ jsx10(Fragment3, { children }) : null; } return /* @__PURE__ */ jsx10(ConstraintsContext.Provider, { value, children }); }; function getParentWidth(parentSize) { return isSize(parentSize) ? parentSize.width : parentSize; } function getParentHeight(parentSize) { return isSize(parentSize) ? parentSize.height : parentSize; } function useProvideParentSize(node, parentSize) { return /* @__PURE__ */ jsx10(ProvideParentSize, { parentSize, children: node }); } function useConstraints(props) { const parentSize = useParentSize(); const calculatedRect = calculateRect(props, parentSize, true); return calculatedRect; } function isAutoSized({ width, height }) { return width === "auto" || width === "min-content" || height === "auto" || height === "min-content"; } // ../../library/src/render/types/PropertyControls.ts var ControlType = /* @__PURE__ */ ((ControlType2) => { ControlType2["Boolean"] = "boolean"; ControlType2["Number"] = "number"; ControlType2["String"] = "string"; ControlType2["RichText"] = "richtext"; ControlType2["FusedNumber"] = "fusednumber"; ControlType2["Enum"] = "enum"; ControlType2["SegmentedEnum"] = "segmentedenum"; ControlType2["Color"] = "color"; ControlType2["Image"] = "image"; ControlType2["ResponsiveImage"] = "responsiveimage"; ControlType2["File"] = "file"; ControlType2["ComponentInstance"] = "componentinstance"; ControlType2["Slot"] = "slot"; ControlType2["Array"] = "array"; ControlType2["EventHandler"] = "eventhandler"; ControlType2["Transition"] = "transition"; ControlType2["BoxShadow"] = "boxshadow"; ControlType2["Link"] = "link"; ControlType2["Date"] = "date"; ControlType2["Object"] = "object"; ControlType2["Font"] = "font"; ControlType2["PageScope"] = "pagescope"; ControlType2["ScrollSectionRef"] = "scrollsectionref"; ControlType2["CustomCursor"] = "customcursor"; ControlType2["Border"] = "border"; ControlType2["Cursor"] = "cursor"; ControlType2["Padding"] = "padding"; ControlType2["BorderRadius"] = "borderradius"; ControlType2["Gap"] = "gap"; ControlType2["CollectionReference"] = "collectionreference"; ControlType2["MultiCollectionReference"] = "multicollectionreference"; ControlType2["TrackingId"] = "trackingid"; ControlType2["VectorSetItem"] = "vectorsetitem"; ControlType2["LinkRelValues"] = "linkrelvalues"; return ControlType2; })(ControlType || {}); // ../../library/src/modules/isFlexboxGapSupported.ts var isFlexboxGapSupportedCached; function isFlexboxGapSupported() { if (isFlexboxGapSupportedCached !== void 0) { return isFlexboxGapSupportedCached; } const flex = document.createElement("div"); Object.assign(flex.style, { position: "absolute", // avoid layout shift display: "flex", flexDirection: "column", rowGap: "1px" }); flex.appendChild(document.createElement("div")); flex.appendChild(document.createElement("div")); document.body.appendChild(flex); const isSupported = flex.scrollHeight === 1; if (flex.parentNode) { flex.parentNode.removeChild(flex); } isFlexboxGapSupportedCached = isSupported; return isSupported; } // ../../library/src/modules/workaroundFlexboxGapNotSupported.ts var flexboxGapNotSupportedClass = "flexbox-gap-not-supported"; var initialized = false; function installFlexboxGapWorkaroundIfNeeded() { if (initialized) return; initialized = true; if (isFlexboxGapSupported()) return; document.body.classList.add(flexboxGapNotSupportedClass); } // ../../library/src/render/utils/injectDeprecatedRichTextRules.ts var richTextStylesRule = ` [data-framer-component-type="DeprecatedRichText"] p, [data-framer-component-type="DeprecatedRichText"] div, [data-framer-component-type="DeprecatedRichText"] h1, [data-framer-component-type="DeprecatedRichText"] h2, [data-framer-component-type="DeprecatedRichText"] h3, [data-framer-component-type="DeprecatedRichText"] h4, [data-framer-component-type="DeprecatedRichText"] h5, [data-framer-component-type="DeprecatedRichText"] h6, [data-framer-component-type="DeprecatedRichText"] li, [data-framer-component-type="DeprecatedRichText"] ol, [data-framer-component-type="DeprecatedRichText"] ul, [data-framer-component-type="DeprecatedRichText"] span:not([data-text-fill]) { font-family: var(--framer-font-family, Inter, Inter Placeholder, sans-serif); font-style: var(--framer-font-style, normal); font-weight: var(--framer-font-weight, 400); color: var(--framer-text-color, #000); font-size: var(--framer-font-size, 16px); letter-spacing: var(--framer-letter-spacing, 0); text-transform: var(--framer-text-transform, none); text-decoration: var(--framer-text-decoration, none); line-height: var(--framer-line-height, 1.2em); text-align: var(--framer-text-alignment, start); } `; var richTextParagraphSpacingStylesRule = ` [data-framer-component-type="DeprecatedRichText"] p:not(:first-child), [data-framer-component-type="DeprecatedRichText"] div:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h1:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h2:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h3:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h4:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h5:not(:first-child), [data-framer-component-type="DeprecatedRichText"] h6:not(:first-child), [data-framer-component-type="DeprecatedRichText"] ol:not(:first-child), [data-framer-component-type="DeprecatedRichText"] ul:not(:first-child), [data-framer-component-type="DeprecatedRichText"] .framer-image:not(:first-child) { margin-top: var(--framer-paragraph-spacing, 0); } `; var richTextBackgroundMaskStylesRule = ` [data-framer-component-type="DeprecatedRichText"] span[data-text-fill] { display: inline-block; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } `; var richTextLinkStylesRule = ` [data-framer-component-type="DeprecatedRichText"] a, [data-framer-component-type="DeprecatedRichText"] a span:not([data-text-fill]) { font-family: var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-link-font-style, var(--framer-font-style, normal)); font-weight: var(--framer-link-font-weight, var(--framer-font-weight, 400)); color: var(--framer-link-text-color, var(--framer-text-color, #000)); font-size: var(--framer-link-font-size, var(--framer-font-size, 16px)); text-transform: var(--framer-link-text-transform, var(--framer-text-transform, none)); text-decoration: var(--framer-link-text-decoration, var(--framer-text-decoration, none)); } `; var richTextLinkHoverStylesRule = ` [data-framer-component-type="DeprecatedRichText"] a:hover, [data-framer-component-type="DeprecatedRichText"] a:hover span:not([data-text-fill]) { font-family: var(--framer-link-hover-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))); font-style: var(--framer-link-hover-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-link-hover-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))); color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))); font-size: var(--framer-link-hover-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))); text-transform: var(--framer-link-hover-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))); text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))); } `; var richTextLinkCurrentStylesRule = ` [data-framer-component-type="DeprecatedRichText"] a[data-framer-page-link-current], [data-framer-component-type="DeprecatedRichText"] a[data-framer-page-link-current] span:not([data-text-fill]):not([data-nested-link]) { font-family: var(--framer-link-current-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))); font-style: var(--framer-link-current-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-link-current-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))); color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))); font-size: var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))); text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))); text-decoration: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))); } `; var richTextLinkCurrentHoverStylesRule = ` [data-framer-component-type="DeprecatedRichText"] a[data-framer-page-link-current]:hover, [data-framer-component-type="DeprecatedRichText"] a[data-framer-page-link-current]:hover span:not([data-text-fill]):not([data-nested-link]) { font-family: var(--framer-link-hover-font-family, var(--framer-link-current-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)))); font-style: var(--framer-link-hover-font-style, var(--framer-link-current-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)))); font-weight: var(--framer-link-hover-font-weight, var(--framer-link-current-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)))); color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)))); font-size: var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))); text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)))); text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)))); } `; var richTextBoldStylesRule = ` [data-framer-component-type="DeprecatedRichText"] strong { font-weight: bolder; } `; var richTextItalicStylesRule = ` [data-framer-component-type="DeprecatedRichText"] em { font-style: italic; } `; var richTextImageRule = ` [data-framer-component-type="DeprecatedRichText"] .framer-image { display: block; max-width: 100%; height: auto; } `; var richTextBlockElementResetRule = ` [data-framer-component-type="DeprecatedRichText"] p, [data-framer-component-type="DeprecatedRichText"] div, [data-framer-component-type="DeprecatedRichText"] h1, [data-framer-component-type="DeprecatedRichText"] h2, [data-framer-component-type="DeprecatedRichText"] h3, [data-framer-component-type="DeprecatedRichText"] h4, [data-framer-component-type="DeprecatedRichText"] h5, [data-framer-component-type="DeprecatedRichText"] h6 { margin: 0; padding: 0; } `; var richTextStylesPresetResetRule = ` [data-framer-component-type="DeprecatedRichText"] .text-styles-preset-reset { --framer-font-family: Inter, Inter Placeholder, sans-serif; --framer-font-style: normal; --framer-font-weight: 500; --framer-text-color: #000; --framer-font-size: 16px; --framer-letter-spacing: 0; --framer-text-transform: none; --framer-text-decoration: none; --framer-line-height: 1.2em; --framer-text-alignment: start; --framer-font-open-type-features: normal; --font-variation-settings: normal; } `; var richTextStylesList = ` [data-framer-component-type="DeprecatedRichText"] ul, [data-framer-component-type="DeprecatedRichText"] ol { display: table; width: 100%; padding-left: 0; margin: 0; } `; var richTextStylesListItem = ` [data-framer-component-type="DeprecatedRichText"] li { display: table-row; counter-increment: list-item; list-style: none; } `; var richTextStylesNumberedListMarker = ` [data-framer-component-type="DeprecatedRichText"] ol > li::before { display: table-cell; width: 2.25ch; box-sizing: border-box; padding-right: 0.75ch; content: counter(list-item) "."; white-space: nowrap; } `; var richTextStylesBulletedListMarker = ` [data-framer-component-type="DeprecatedRichText"] ul > li::before { display: table-cell; width: 2.25ch; box-sizing: border-box; padding-right: 0.75ch; content: "\u2022"; } `; var deprecatedRichTextCSSRules = [ `[data-framer-component-type="DeprecatedRichText"] { cursor: inherit; }`, richTextStylesPresetResetRule, richTextBlockElementResetRule, richTextStylesRule, richTextParagraphSpacingStylesRule, richTextBackgroundMaskStylesRule, richTextLinkStylesRule, richTextLinkHoverStylesRule, richTextLinkCurrentStylesRule, richTextLinkCurrentHoverStylesRule, richTextBoldStylesRule, richTextItalicStylesRule, richTextImageRule, richTextStylesList, richTextStylesListItem, richTextStylesNumberedListMarker, richTextStylesBulletedListMarker ]; // ../../library/src/render/presentation/Forms/shared.ts import React15 from "react"; var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2) => { FormInputStyleVariableNames2["Padding"] = "--framer-input-padding"; FormInputStyleVariableNames2["BorderRadiusTopLeft"] = "--framer-input-border-radius-top-left"; FormInputStyleVariableNames2["BorderRadiusTopRight"] = "--framer-input-border-radius-top-right"; FormInputStyleVariableNames2["BorderRadiusBottomRight"] = "--framer-input-border-radius-bottom-right"; FormInputStyleVariableNames2["BorderRadiusBottomLeft"] = "--framer-input-border-radius-bottom-left"; FormInputStyleVariableNames2["BorderColor"] = "--framer-input-border-color"; FormInputStyleVariableNames2["BorderTopWidth"] = "--framer-input-border-top-width"; FormInputStyleVariableNames2["BorderRightWidth"] = "--framer-input-border-right-width"; FormInputStyleVariableNames2["BorderBottomWidth"] = "--framer-input-border-bottom-width"; FormInputStyleVariableNames2["BorderLeftWidth"] = "--framer-input-border-left-width"; FormInputStyleVariableNames2["BorderStyle"] = "--framer-input-border-style"; FormInputStyleVariableNames2["Background"] = "--framer-input-background"; FormInputStyleVariableNames2["FontFamily"] = "--framer-input-font-family"; FormInputStyleVariableNames2["FontWeight"] = "--framer-input-font-weight"; FormInputStyleVariableNames2["FontSize"] = "--framer-input-font-size"; FormInputStyleVariableNames2["FontColor"] = "--framer-input-font-color"; FormInputStyleVariableNames2["FontStyle"] = "--framer-input-font-style"; FormInputStyleVariableNames2["FontLetterSpacing"] = "--framer-input-font-letter-spacing"; FormInputStyleVariableNames2["FontTextAlignment"] = "--framer-input-font-text-alignment"; FormInputStyleVariableNames2["FontLineHeight"] = "--framer-input-font-line-height"; FormInputStyleVariableNames2["FontOpenType"] = "--framer-input-font-open-type-features"; FormInputStyleVariableNames2["PlaceholderColor"] = "--framer-input-placeholder-color"; FormInputStyleVariableNames2["BoxShadow"] = "--framer-input-box-shadow"; FormInputStyleVariableNames2["FocusedBorderColor"] = "--framer-input-focused-border-color"; FormInputStyleVariableNames2["FocusedBorderWidth"] = "--framer-input-focused-border-width"; FormInputStyleVariableNames2["FocusedBorderStyle"] = "--framer-input-focused-border-style"; FormInputStyleVariableNames2["FocusedBackground"] = "--framer-input-focused-background"; FormInputStyleVariableNames2["FocusedBoxShadow"] = "--framer-input-focused-box-shadow"; FormInputStyleVariableNames2["FocusedTransition"] = "--framer-input-focused-transition"; FormInputStyleVariableNames2["BooleanCheckedBackground"] = "--framer-input-boolean-checked-background"; FormInputStyleVariableNames2["BooleanCheckedBorderColor"] = "--framer-input-boolean-checked-border-color"; FormInputStyleVariableNames2["BooleanCheckedBorderWidth"] = "--framer-input-boolean-checked-border-width"; FormInputStyleVariableNames2["BooleanCheckedBorderStyle"] = "--framer-input-boolean-checked-border-style"; FormInputStyleVariableNames2["BooleanCheckedBoxShadow"] = "--framer-input-boolean-checked-box-shadow"; FormInputStyleVariableNames2["BooleanCheckedTransition"] = "--framer-input-boolean-checked-transition"; FormInputStyleVariableNames2["InvalidTextColor"] = "--framer-input-invalid-text-color"; FormInputStyleVariableNames2["IconBackgroundImage"] = "--framer-input-icon-image"; FormInputStyleVariableNames2["IconMaskImage"] = "--framer-input-icon-mask-image"; FormInputStyleVariableNames2["IconColor"] = "--framer-input-icon-color"; FormInputStyleVariableNames2["WrapperHeight"] = "--framer-input-wrapper-height"; return FormInputStyleVariableNames2; })(FormInputStyleVariableNames || {}); var Var = FormInputStyleVariableNames; var inputClassName = "framer-form-input"; var inputWrapperClassName = "framer-form-input-wrapper"; var emptyValueClassName = "framer-form-input-empty"; var forcedFocusClassName = "framer-form-input-forced-focus"; var forcedCheckedClassName = "framer-form-input-forced-checked"; function cssValue(value) { if (typeof value === "number") return value; if (value.startsWith("--")) return css.variable(value); if (value === "") return '""'; return value; } function css(selector, declaration) { let output = " "; for (const key7 in declaration) { const value = declaration[key7]; output += `${key7.replace(/([A-Z])/gu, "-$1").toLowerCase()}: ${cssValue(value)}; `; } return selector + " {" + output + "}"; } ((css2) => { function variable(...variables) { const lastItem = variables[variables.length - 1]; let value = lastItem.startsWith("--") ? `var(${lastItem})` : lastItem; for (let index = variables.length - 2; index >= 0; index--) { const element = variables[index]; value = `var(${element}, ${value})`; } return value; } css2.variable = variable; })(css || (css = {})); var sharedInputCSS = [ css(`.${inputClassName}`, { padding: css.variable(Var.Padding), background: "transparent", fontFamily: css.variable(Var.FontFamily), fontWeight: css.variable(Var.FontWeight), fontSize: css.variable(Var.FontSize), fontStyle: css.variable(Var.FontStyle), color: css.variable(Var.FontColor), fontFeatureSettings: css.variable(Var.FontOpenType), border: "none", textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", width: "100%", height: css.variable(Var.WrapperHeight, "100%"), letterSpacing: css.variable(Var.FontLetterSpacing), textAlign: css.variable(Var.FontTextAlignment), lineHeight: css.variable(Var.FontLineHeight) }), css(`.${inputClassName}:focus-visible`, { outline: "none" }) ]; var inputWrapperCSS = /* @__PURE__ */ (() => [css(`.${inputWrapperClassName}`, { overflow: "hidden" })])(); var inputBorderAllSides = `var(${Var.BorderTopWidth}) var(${Var.BorderRightWidth}) var(${Var.BorderBottomWidth}) var(${Var.BorderLeftWidth})`; var inputBorderCSS = [ `.${inputWrapperClassName}:after { content: ""; pointer-events: none; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top-left-radius: var(${Var.BorderRadiusTopLeft}); border-top-right-radius: var(${Var.BorderRadiusTopRight}); border-bottom-right-radius: var(${Var.BorderRadiusBottomRight}); border-bottom-left-radius: var(${Var.BorderRadiusBottomLeft}); border-color: var(${Var.BorderColor}); border-top-width: var(${Var.BorderTopWidth}); border-right-width: var(${Var.BorderRightWidth}); border-bottom-width: var(${Var.BorderBottomWidth}); border-left-width: var(${Var.BorderLeftWidth}); border-style: var(${Var.BorderStyle}); transition: var(${Var.FocusedTransition}); transition-property: border-color, border-width, border-style, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius; }` ]; var customValidityKey = "customError"; var validKey = "valid"; function isRelevantValidityStateKey(key7) { return key7 !== customValidityKey && key7 !== validKey; } function isInvalid(validity) { for (const key7 in validity) { if (!isRelevantValidityStateKey(key7)) continue; if ((validity == null ? void 0 : validity[key7]) === true) return true; } return false; } function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus) { const isValidRef = React15.useRef(null); const handleInvalid = React15.useCallback( (e) => { if (!onInvalid) return; if (isValidRef.current === false) return; isValidRef.current = false; e.currentTarget.setCustomValidity(" "); e.currentTarget.reportValidity(); onInvalid(e); }, [onInvalid] ); const handleChange = React15.useCallback( (e) => { onChange == null ? void 0 : onChange(e); if (!onInvalid && !onValid) return; const validity = e.target.validity; if (isValidRef.current === false && !isInvalid(validity)) { e.currentTarget.setCustomValidity(""); e.target.reportValidity(); isValidRef.current = true; onValid == null ? void 0 : onValid(); } }, [onInvalid, onValid, onChange] ); const handleBlur = React15.useCallback( (e) => { if (!onInvalid) { onBlur == null ? void 0 : onBlur(e); return; } if (isValidRef.current === false) return; const validity = e.currentTarget.validity; if (isInvalid(validity)) { handleInvalid(e); return; } onBlur == null ? void 0 : onBlur(e); }, [handleInvalid, onBlur, onInvalid] ); return React15.useMemo(() => { return { onInvalid: handleInvalid, onChange: handleChange, onBlur: handleBlur, onFocus }; }, [handleInvalid, handleChange, handleBlur, onFocus]); } var iconSpacing = 10; var iconSize = 16; var inputIconCSSDeclaration = { content: "", display: "block", position: "absolute", right: 0, top: 0, bottom: 0, width: `${iconSize}px`, boxSizing: "content-box", padding: css.variable(Var.Padding), border: "none", pointerEvents: "none", backgroundRepeat: "no-repeat", backgroundSize: `${iconSize}px`, maskRepeat: "no-repeat", maskSize: `${iconSize}px`, backgroundColor: css.variable(Var.IconColor) }; // ../../library/src/render/utils/injectRichTextRules.ts function createRGBVariableFallbacks(variables, fallback) { return css.variable(...variables.flatMap((variable) => [`${variable}-rgb`, variable]), fallback); } var richTextCSSRules = /* @__PURE__ */ (() => [ /* css */ ` p.framer-text, div.framer-text, figure.framer-text, h1.framer-text, h2.framer-text, h3.framer-text, h4.framer-text, h5.framer-text, h6.framer-text, ol.framer-text, ul.framer-text { margin: 0; padding: 0; } `, /* css */ ` p.framer-text, div.framer-text, h1.framer-text, h2.framer-text, h3.framer-text, h4.framer-text, h5.framer-text, h6.framer-text, li.framer-text, ol.framer-text, ul.framer-text, mark.framer-text, span.framer-text:not([data-text-fill]) { font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-blockquote-font-style, var(--framer-font-style, normal)); font-weight: var(--framer-blockquote-font-weight, var(--framer-font-weight, 400)); color: var(--framer-blockquote-text-color, var(--framer-text-color, #000)); font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1)); letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0)); text-transform: var(--framer-blockquote-text-transform, var(--framer-text-transform, none)); text-decoration-line: var(--framer-blockquote-text-decoration, var(--framer-text-decoration, initial)); text-decoration-style: var(--framer-blockquote-text-decoration-style, var(--framer-text-decoration-style, initial)); text-decoration-color: var(--framer-blockquote-text-decoration-color, var(--framer-text-decoration-color, initial)); text-decoration-thickness: var(--framer-blockquote-text-decoration-thickness, var(--framer-text-decoration-thickness, initial)); text-decoration-skip-ink: var(--framer-blockquote-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial)); text-underline-offset: var(--framer-blockquote-text-decoration-offset, var(--framer-text-decoration-offset, initial)); line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em)); text-align: var(--framer-blockquote-text-alignment, var(--framer-text-alignment, start)); -webkit-text-stroke-width: var(--framer-text-stroke-width, initial); -webkit-text-stroke-color: var(--framer-text-stroke-color, initial); -moz-font-feature-settings: var(--framer-font-open-type-features, initial); -webkit-font-feature-settings: var(--framer-font-open-type-features, initial); font-feature-settings: var(--framer-font-open-type-features, initial); font-variation-settings: var(--framer-font-variation-axes, normal); text-wrap: var(--framer-text-wrap-override, var(--framer-text-wrap)); } `, /* css */ ` mark.framer-text, p.framer-text, div.framer-text, h1.framer-text, h2.framer-text, h3.framer-text, h4.framer-text, h5.framer-text, h6.framer-text, li.framer-text, ol.framer-text, ul.framer-text { background-color: var(--framer-blockquote-text-background-color, var(--framer-text-background-color, initial)); border-radius: var(--framer-blockquote-text-background-radius, var(--framer-text-background-radius, initial)); padding: var(--framer-blockquote-text-background-padding, var(--framer-text-background-padding, initial)); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { p.framer-text, div.framer-text, h1.framer-text, h2.framer-text, h3.framer-text, h4.framer-text, h5.framer-text, h6.framer-text, li.framer-text, ol.framer-text, ul.framer-text, span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-blockquote-text-color", "--framer-text-color"], "#000")}; -webkit-text-stroke-color: ${createRGBVariableFallbacks(["--framer-text-stroke-color"], "initial")}; } mark.framer-text { background-color: ${createRGBVariableFallbacks(["--framer-blockquote-text-background-color", "--framer-text-background-color"], "initial")}; } } `, /* css */ ` .framer-fit-text .framer-text { white-space: nowrap; white-space-collapse: preserve; } `, /* css */ ` strong.framer-text { font-family: var(--framer-blockquote-font-family-bold, var(--framer-font-family-bold)); font-style: var(--framer-blockquote-font-style-bold, var(--framer-font-style-bold)); font-weight: var(--framer-blockquote-font-weight-bold, var(--framer-font-weight-bold, bolder)); font-variation-settings: var(--framer-blockquote-font-variation-axes-bold, var(--framer-font-variation-axes-bold)); } `, /* css */ ` em.framer-text { font-family: var(--framer-blockquote-font-family-italic, var(--framer-font-family-italic)); font-style: var(--framer-blockquote-font-style-italic, var(--framer-font-style-italic, italic)); font-weight: var(--framer-blockquote-font-weight-italic, var(--framer-font-weight-italic)); font-variation-settings: var(--framer-blockquote-font-variation-axes-italic, var(--framer-font-variation-axes-italic)); } `, /* css */ ` em.framer-text > strong.framer-text { font-family: var(--framer-blockquote-font-family-bold-italic, var(--framer-font-family-bold-italic)); font-style: var(--framer-blockquote-font-style-bold-italic, var(--framer-font-style-bold-italic, italic)); font-weight: var(--framer-blockquote-font-weight-bold-italic, var(--framer-font-weight-bold-italic, bolder)); font-variation-settings: var(--framer-blockquote-font-variation-axes-bold-italic, var(--framer-font-variation-axes-bold-italic)); } `, /* css */ ` p.framer-text:not(:first-child), div.framer-text:not(:first-child), h1.framer-text:not(:first-child), h2.framer-text:not(:first-child), h3.framer-text:not(:first-child), h4.framer-text:not(:first-child), h5.framer-text:not(:first-child), h6.framer-text:not(:first-child), ol.framer-text:not(:first-child), ul.framer-text:not(:first-child), blockquote.framer-text:not(:first-child), table.framer-text:not(:first-child), figure.framer-text:not(:first-child), .framer-image.framer-text:not(:first-child) { margin-top: var(--framer-blockquote-paragraph-spacing, var(--framer-paragraph-spacing, 0)); } `, // The first child of a list item is a paragraph. If the second child is a // nested list we don't want it to have paragraph spacing. /* css */ ` li.framer-text > ul.framer-text:nth-child(2), li.framer-text > ol.framer-text:nth-child(2) { margin-top: 0; } `, // background-clip: text clips to the physical dimensions of text as appose // to the rendered dimensions. normal text will bleed out side these // constraints but since this is just a clipping mask over the area the text // takes up we have cases where the text will get clipped. That is why we // need to expand the area that the gradient applies to to allow users to // use low line-heights. This will result in gradients not aligning // perfectly to the edges of the text. but this is a acceptable trade off at // this point. For now we increase the area of the clipping mask on the // bottom (for descenders) and the right for italic or wide fonts. /* css */ ` .framer-text[data-text-fill] { display: inline-block; background-clip: text; -webkit-background-clip: text; /* make this a transparent color if you want to visualise the clipping */ -webkit-text-fill-color: transparent; padding: max(0em, calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / 2)); margin: min(0em, calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / -2)); } `, /* css */ ` code.framer-text, code.framer-text span.framer-text:not([data-text-fill]) { font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400))); color: var(--framer-blockquote-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))); font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1)); letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0)); line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em)); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { code.framer-text, code.framer-text span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-blockquote-text-color", "--framer-code-text-color", "--framer-text-color"], "#000")}; } } `, /* css */ ` blockquote.framer-text { margin-block-start: initial; margin-block-end: initial; margin-inline-start: initial; margin-inline-end: initial; unicode-bidi: initial; } `, /* css */ ` a.framer-text, a.framer-text span.framer-text:not([data-text-fill]), span.framer-text[data-nested-link], span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) { font-family: var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))); font-style: var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))); color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))); font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1)); text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))); /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */ cursor: var(--framer-custom-cursors, pointer); /* Don't inherit background styles from any parent text style. */ background-color: var(--framer-link-text-background-color, initial); border-radius: var(--framer-link-text-background-radius, initial); padding: var(--framer-link-text-background-padding, initial); } `, // Text decoration can't be applied to the nested spans of links because it breaks animations /* css */ ` a.framer-text, span.framer-text[data-nested-link] { text-decoration-line: var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial))); text-decoration-style: var(--framer-blockquote-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial))); text-decoration-color: var(--framer-blockquote-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial))); text-decoration-thickness: var(--framer-blockquote-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial))); text-decoration-skip-ink: var(--framer-blockquote-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial))); text-underline-offset: var(--framer-blockquote-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial))); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { a.framer-text, a.framer-text span.framer-text:not([data-text-fill]), span.framer-text[data-nested-link], span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-blockquote-text-color", "--framer-link-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-text-background-color"], "initial")}; } } `, /* css */ ` code.framer-text a.framer-text, code.framer-text a.framer-text span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-nested-link], code.framer-text span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) { font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400))); color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))); font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1)); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { code.framer-text a.framer-text, code.framer-text a.framer-text span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-nested-link], code.framer-text span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-blockquote-text-color", "--framer-link-text-color", "--framer-code-text-color", "--framer-text-color"], "#000")}; } } `, /* css */ ` a.framer-text:hover, a.framer-text:hover span.framer-text:not([data-text-fill]), span.framer-text[data-nested-link]:hover, span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill]) { font-family: var(--framer-link-hover-font-family, var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)))); font-style: var(--framer-link-hover-font-style, var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)))); font-weight: var(--framer-link-hover-font-weight, var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)))); color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)))); font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1)); text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)))); background-color: var(--framer-link-hover-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial))); border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial))); padding: var(--framer-link-hover-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial))); } `, /* css */ ` a.framer-text:hover, span.framer-text[data-nested-link]:hover { text-decoration-line: var(--framer-link-hover-text-decoration, var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial)))); text-decoration-style: var(--framer-link-hover-text-decoration-style, var(--framer-blockquote-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial)))); text-decoration-color: var(--framer-link-hover-text-decoration-color, var(--framer-blockquote-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial)))); text-decoration-thickness: var(--framer-link-hover-text-decoration-thickness, var(--framer-blockquote-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial)))); text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink, var(--framer-blockquote-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial)))); text-underline-offset: var(--framer-link-hover-text-decoration-offset, var(--framer-blockquote-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial)))); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { a.framer-text:hover, a.framer-text:hover span.framer-text:not([data-text-fill]), span.framer-text[data-nested-link]:hover, span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-hover-text-color", "--framer-blockquote-text-color", "--framer-link-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-hover-text-background-color", "--framer-link-text-background-color", "--framer-text-background-color"], "initial")}; } } `, /* css */ ` code.framer-text a.framer-text:hover, code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-nested-link]:hover, code.framer-text span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill]) { font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400))); color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))))); font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1)); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { code.framer-text a.framer-text:hover, code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-nested-link]:hover, code.framer-text span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-hover-text-color", "--framer-blockquote-text-color", "--framer-link-text-color", "--framer-text-color"], "#000")}; } } `, /* css */ ` a.framer-text[data-framer-page-link-current], a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]), span.framer-text[data-framer-page-link-current], span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) { font-family: var(--framer-link-current-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))); font-style: var(--framer-link-current-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))); font-weight: var(--framer-link-current-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))); color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))); font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1)); text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))); background-color: var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial)); border-radius: var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial)); padding: var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial)); } `, /* css */ ` a.framer-text[data-framer-page-link-current], span.framer-text[data-framer-page-link-current] { text-decoration-line: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial))); text-decoration-style: var(--framer-link-current-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial))); text-decoration-color: var(--framer-link-current-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial))); text-decoration-thickness: var(--framer-link-current-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial))); text-decoration-skip-ink: var(--framer-link-current-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial))); text-underline-offset: var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial))); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { a.framer-text[data-framer-page-link-current], a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]), span.framer-text[data-framer-page-link-current], span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-current-text-color", "--framer-link-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-current-text-background-color", "--framer-link-text-background-color", "--framer-text-background-color"], "initial")}; } } `, /* css */ ` code.framer-text a.framer-text[data-framer-page-link-current], code.framer-text a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-framer-page-link-current], code.framer-text span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) { font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-code-font-style, var(--framer-font-style, normal)); font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400)); color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))); font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1)); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { code.framer-text a.framer-text[data-framer-page-link-current], code.framer-text a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-framer-page-link-current], code.framer-text span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-current-text-color", "--framer-link-text-color", "--framer-code-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-current-text-background-color", "--framer-link-text-background-color", "--framer-text-background-color"], "initial")}; } } `, /* css */ ` a.framer-text[data-framer-page-link-current]:hover, a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]), span.framer-text[data-framer-page-link-current]:hover, span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) { font-family: var(--framer-link-hover-font-family, var(--framer-link-current-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)))); font-style: var(--framer-link-hover-font-style, var(--framer-link-current-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)))); font-weight: var(--framer-link-hover-font-weight, var(--framer-link-current-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)))); color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)))); font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1)); text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)))); background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial))); border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial))); padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial))); } `, /* css */ ` a.framer-text[data-framer-page-link-current]:hover, span.framer-text[data-framer-page-link-current]:hover { text-decoration-line: var(--framer-link-hover-text-decoration, var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial)))); text-decoration-style: var(--framer-link-hover-text-decoration-style, var(--framer-link-current-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial)))); text-decoration-color: var(--framer-link-hover-text-decoration-color, var(--framer-link-current-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial)))); text-decoration-thickness: var(--framer-link-hover-text-decoration-thickness, var(--framer-link-current-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial)))); text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink, var(--framer-link-current-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial)))); text-underline-offset: var(--framer-link-hover-text-decoration-offset, var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial)))); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { a.framer-text[data-framer-page-link-current]:hover, a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]), span.framer-text[data-framer-page-link-current]:hover, span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-hover-text-color", "--framer-link-current-text-color", "--framer-link-text-color", "--framer-code-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-hover-text-background-color", "--framer-link-current-text-background-color", "--framer-link-text-background-color"], "initial")}; } } `, /* css */ ` code.framer-text a.framer-text[data-framer-page-link-current]:hover, code.framer-text a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-framer-page-link-current]:hover, code.framer-text span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) { font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)); font-style: var(--framer-code-font-style, var(--framer-font-style, normal)); font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400)); color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))))); font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1)); background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial)))); border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial)))); padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial)))); } `, /* css */ ` @supports not (color: color(display-p3 1 1 1)) { code.framer-text a.framer-text[data-framer-page-link-current]:hover, code.framer-text a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]), code.framer-text span.framer-text[data-framer-page-link-current]:hover, code.framer-text span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) { color: ${createRGBVariableFallbacks(["--framer-link-hover-text-color", "--framer-link-current-text-color", "--framer-link-text-color", "--framer-code-text-color", "--framer-text-color"], "#000")}; background-color: ${createRGBVariableFallbacks(["--framer-link-hover-text-background-color", "--framer-link-current-text-background-color", "--framer-link-text-background-color"], "initial")}; } } `, /* css */ ` .framer-image.framer-text { display: block; max-width: 100%; height: auto; } `, /* css */ ` .text-styles-preset-reset.framer-text { --framer-font-family: Inter, Inter Placeholder, sans-serif; --framer-font-style: normal; --framer-font-weight: 500; --framer-text-color: #000; --framer-font-size: 16px; --framer-letter-spacing: 0; --framer-text-transform: none; --framer-text-decoration: none; --framer-text-decoration-style: none; --framer-text-decoration-color: none; --framer-text-decoration-thickness: none; --framer-text-decoration-skip-ink: none; --framer-text-decoration-offset: none; --framer-line-height: 1.2em; --framer-text-alignment: start; --framer-font-open-type-features: normal; --framer-text-background-color: initial; --framer-text-background-radius: initial; --framer-text-background-padding: initial; } `, /* css */ ` ol.framer-text { --list-style-type: decimal; } `, // Why all the `position: relative` and `position: absolute` and `::before` tricks? // We want ul’s disks and ol’s numbers to be left-aligned at the start of the line. // There’s no way to do that with ::marker styles alone, so we have to resort to this trick. /* css */ ` ul.framer-text, ol.framer-text { padding-left: 3ch; position: relative; } `, /* css */ ` li.framer-text { counter-increment: list-item; list-style: none; } `, // font-variant-numeric: tabular-nums enables monospaced numbers (which is neat in a vertical list of numbers) // and makes `li`s match the default browser styles better. /* css */ ` ol.framer-text > li.framer-text::before { position: absolute; left: 0; content: counter(list-item, var(--list-style-type)) "."; font-variant-numeric: tabular-nums; } `, // Why this? Due to `position: absolute` (see above), if a list has a lot of items, the numbers // might start overlapping the text content. This compensates for that. The trick is based on // https://alistapart.com/article/quantity-queries-for-css/#section6. The trick doesn’t account // for lists longer than 1,000,000 items, but if you have a list of 1,000,000 items, you’ll have // other problems ¯\_(ツ)_/¯ /* css */ ` ol.framer-text > li.framer-text:nth-last-child(n + 100), ol.framer-text > li.framer-text:nth-last-child(n + 100) ~ li { padding-left: 1ch; } `, /* css */ ` ol.framer-text > li.framer-text:nth-last-child(n + 1000), ol.framer-text > li.framer-text:nth-last-child(n + 1000) ~ li { padding-left: 2ch; } `, /* css */ ` ol.framer-text > li.framer-text:nth-last-child(n + 10000), ol.framer-text > li.framer-text:nth-last-child(n + 10000) ~ li { padding-left: 3ch; } `, /* css */ ` ol.framer-text > li.framer-text:nth-last-child(n + 100000), ol.framer-text > li.framer-text:nth-last-child(n + 100000) ~ li { padding-left: 4ch; } `, /* css */ ` ol.framer-text > li.framer-text:nth-last-child(n + 1000000), ol.framer-text > li.framer-text:nth-last-child(n + 1000000) ~ li { padding-left: 5ch; } `, /* css */ ` ul.framer-text > li.framer-text::before { position: absolute; left: 0; content: "\u2022"; } `, /* css */ ` .framer-table-wrapper { overflow-x: auto; } `, /* css */ ` table.framer-text, .framer-table-wrapper table.framer-text { border-collapse: separate; border-spacing: 0; table-layout: auto; word-break: normal; width: 100%; } `, /* css */ ` td.framer-text, th.framer-text { min-width: 16ch; vertical-align: top; } `, /* css */ ` .framer-text-module[style*="aspect-ratio"] > :first-child { width: 100%; } `, /* css */ ` @supports not (aspect-ratio: 1) { .framer-text-module[style*="aspect-ratio"] { position: relative; } } `, /* css */ ` @supports not (aspect-ratio: 1) { .framer-text-module[style*="aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / calc(var(--aspect-ratio))); } } `, /* css */ ` @supports not (aspect-ratio: 1) { .framer-text-module[style*="aspect-ratio"] > :first-child { position: absolute; top: 0; left: 0; height: 100%; } } ` ])(); // ../../library/src/render/utils/setDocumentStyles.ts var defaultCache = /* @__PURE__ */ new Set(); var defaultSheet; function injectCSSRule(cssRule, sheet, cache2 = defaultCache) { if (!cssRule || cache2.has(cssRule) || typeof document === "undefined") return; cache2.add(cssRule); if (!sheet) { if (!defaultSheet) { const styleElement = document.createElement("style"); styleElement.setAttribute("type", "text/css"); styleElement.setAttribute("data-framer-css", "true"); if (!document.head) { console.warn("not injecting CSS: the document is missing a element"); return; } document.head.appendChild(styleElement); if (styleElement.sheet) { defaultSheet = styleElement.sheet; } else { console.warn("not injecting CSS: injected